django - 如何在 Django 中使用 vue 开发模式
问题描述
我不知道如何使用 Django 运行开发模式。我正在运行 webpack,当我完成所有 Vuejs 工作时,我只是将所有内容捆绑到 Django 将其作为静态文件提供的文件夹中。我知道我必须使用模式开发运行 webpack,但这不起作用,它给了我一个找不到的错误。我想在开发模式下与 Django 一起运行 Vuejs,我该怎么做?我将与您分享我的项目结构,我的 package.json 和 webpack 配置。
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './frontend/Vue/main.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, './static/js'),
publicPath: '/static/js'
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
use: [
{ loader: 'babel-loader' }
]
},
{
test: /\.(css|scss)/,
use: [
'style-loader'
]
},
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader'
}
]
},
devServer: {
// contentBase: ponerle la ruta del index de django
contentBase: path.join(__dirname, 'templates'),
watchContentBase: true,
historyApiFallback: true,
noInfo: true
},
plugins: [
new VueLoaderPlugin()
]
}
包.json
{
"name": "TuDistribuidora",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --port 9000 --open",
"build": "webpack --progress"
},
"repository": {
"type": "git",
"url": "git+https://github.com/EmiBuffet/TuDistribuidora.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/EmiBuffet/TuDistribuidora/issues"
},
"homepage": "https://github.com/EmiBuffet/TuDistribuidora#readme",
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.4.5",
"vuex": "^3.5.1"
},
"devDependencies": {
"@babel/core": "^7.11.1",
"babel-loader": "^8.1.0",
"babel-preset-es2015": "^6.24.1",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.3",
"style-loader": "^1.2.1",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"bulma": "^0.9.1"
}
}
解决方案
在你的 Django 项目中使用django-webpack-loader并在你的 webpack 构建中使用 webpack-bundle-tracker 将提供在生产/开发 Vue 构建之间快速切换所需的连接。捆绑信息将由 webpack 记录到 awebpack-stats.json
中,然后 Django 将使用它来获取/加载给定视图的正确捆绑包。
我有一篇文章逐步解释了如何使用上述技术设置项目。
好黑客!
推荐阅读
- android - 错误:[Dagger/MissingBinding] java.util.ArrayList
如果没有 @Inject 构造函数或 @Provides-annotated 方法,则无法提供 - python - 如何将应用函数链接到熊猫数据框的子集
- javascript - 同时映射两个数组并传递给一个 React 组件
- c# - nHibernate.IQueryOver 删除子类左连接
- android - 带有滚动视图的活动底部的按钮
- c++ - 参数中的 C++ 函数错误:表达式必须具有常量值
- sql - 如何通过另一个表中值的最后创建时间戳从一个表顺序中选择所有值
- r - 将 bin(df) 输出转换为数据帧
- autocad - 将绘图绘制为 Pdf 并将 pdf 转换为 bytearray
- python - Python Popen SendKeys 到 Popen 窗口