部署webpack+;vuejs+;django到Heroku,procfile配置
我正试图将我的VueJS Django应用程序部署到Heroku,但在Heroku上运行webpack时遇到问题。我可以收集静态文件,但似乎webpack没有运行(找不到webpack),因此网站没有运行webpack,这意味着不仅VueJs文件不会传输到ES5,而且我的index.html页面甚至不会调用webpack输出的捆绑代码。你知道为什么会发生这种情况以及如何解决吗 关于一些相关的注释:我使用Gunicorn作为web服务器,使用whitenoise来服务我的静态文件 此外,一旦我能够运行webpack,即使我在我的.babelrc中设置了es2015预设,我如何在控制台中处理此错误 vendor.js:1未捕获的语法错误:意外的令牌导入部署webpack+;vuejs+;django到Heroku,procfile配置,django,heroku,npm,webpack,vue.js,Django,Heroku,Npm,Webpack,Vue.js,我正试图将我的VueJS Django应用程序部署到Heroku,但在Heroku上运行webpack时遇到问题。我可以收集静态文件,但似乎webpack没有运行(找不到webpack),因此网站没有运行webpack,这意味着不仅VueJs文件不会传输到ES5,而且我的index.html页面甚至不会调用webpack输出的捆绑代码。你知道为什么会发生这种情况以及如何解决吗 关于一些相关的注释:我使用Gunicorn作为web服务器,使用whitenoise来服务我的静态文件 此外,一旦我能够
import Vue from 'vue'
import ElementUI from 'element-ui'
以下是我所拥有的(大部分内容都基于VueJS元素初学者工具包)
Package.json:
{
"name": "element-starter",
"description": "A Vue.js project",
"author": "yi.shyang@ele.me",
"private": true,
"scripts": {
"dev": "webpack-dev-server -d --inline --hot --env.dev",
"heroku-postbuild": "rimraf static && webpack -p --config ./webpack.config.js --progress"
},
"dependencies": {
"element-ui": "^1.1.2",
"vue": "^2.1.8"
},
"engines": {
"node": ">=6"
},
"devDependencies": {
"autoprefixer": "^6.6.0",
"babel-core": "^6.21.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.4.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-preset-es2015": "^6.13.2",
"css-loader": "^0.27.0",
"eslint": "^3.12.2",
"eslint-config-enough": "^0.2.2",
"eslint-loader": "^1.6.3",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.24.1",
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.1.8",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}
程序文件:
web: ./manage.py collectstatic --noinput; npm install; npm run heroku-postbuild; gunicorn dashboard.wsgi --log-file -
.LRC:
{
"presets": [
["es2015", { "modules": false }]
]
}
webpack.config.js
const {
resolve
} = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
// where the static files will be accessed from publicly
const publicPath = '/static/'
module.exports = (options = {}) => ({
entry: {
vendor: './src/vendor',
index: './src/main.js'
},
output: {
path: resolve(__dirname, 'static'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: '[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.js$/,
use: ['babel-loader'],
include: [resolve(__dirname, 'src'), resolve(__dirname, 'static')],
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
root: resolve(__dirname, 'src'),
attrs: ['img:src', 'link:href']
}
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /favicon\.png$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
exclude: /favicon\.png$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
})
// options:dev ? '' : new webpack.DefinePlugin({
// 'process.env': {
// NODE_ENV: '"production"'
// }
// }),
// options:dev ? '' : new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// })
],
resolve: {
alias: {
'~': resolve(__dirname, 'src')
}
},
devServer: {
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
historyApiFallback: {
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
}
},
devtool: options.dev ? '#eval-source-map' : '#source-map'
})
可能的副本请参阅此问题的答案。请帮助我了解此问题: