我不知道如何使用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()
]
}
package.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"
}
}
答案 0 :(得分:0)
在您的Django项目中将django-webpack-loader与webpack构建中的webpack-bundle-tracker结合使用,将提供在生产/开发Vue构建之间快速切换所需的连接。捆绑包信息将由webpack记录到webpack-stats.json
中,然后Django会使用该信息为给定视图获取/加载正确的捆绑包。
我有一个article explaining step-by-step how to set up a project with the above techniques。
骇客入侵!