我写了一个vue + webpack项目,在webpack-dev-middleware中运行良好。现在我想使用nginx进行部署。我做的是编写一个webpack.build.config.js文件并将所有文件捆绑到一个dist文件夹中。然后我只需将dist文件夹复制到nginx html文件夹中,并在nginx.conf中指定索引。但是,它报错了:
我的nginx.conf如下:
运行构建时,执行以下命令:
我是个新手,对devops/backend非常困惑,整个构建或部署过程也很迷惑。在生产环境中,是否仍需要webpack-dev-server 或 nodejs?我的生产环境后端是nginx/PHP和IIS/.Net,现在根本没有安装node。[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)
我的nginx.conf如下:
location / {
root html/dist;
index index.html index.htm;
}
而 webpack.build.config.js 是
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "components";
//var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
module.exports = {
entry: [
path.join(__dirname,'./index.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
devtool: 'eval-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'index.html'),
inject: true
})
],
resolve: {
root: [path.resolve('./components')],
extensions: ['', '.js', '.css']
},
module: {
loaders: [
]
}
};
运行构建时,执行以下命令:
webpack -p --config ./webpack.build.config.js
。该命令将使用指定的配置文件进行生产环境打包。