我正在尝试使用Webpack Encore为VueJS设置生产模式。因此,我在文档中指定了一个新插件,但这似乎没有任何改变。
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
我为NODE_ENV
设置尝试了多种不同的语法,但似乎无济于事
我错过了什么吗?我的webpack conf看起来像这样
const
CopyWebpackPlugin = require('copy-webpack-plugin'),
Encore = require('@symfony/webpack-encore'),
UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
webpack = require('webpack');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.addEntry('app', './assets/js/app.js')
.addEntry('admin', './assets/js/admin.js')
.addEntry('common', './assets/js/common.js')
.addPlugin(new CopyWebpackPlugin([
...
]))
.enableSassLoader()
.enableVueLoader()
.autoProvideVariables({
'$': 'jquery',
'jQuery': 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
})
.enableSourceMaps(!Encore.isProduction())
;
const config = Encore.getWebpackConfig();
config.plugins = config.plugins.filter(
(plugin) => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);
if (Encore.isProduction()) {
config.plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
new UglifyJsPlugin()
);
}
config.resolve.alias = {
handlebars: 'handlebars/dist/handlebars.min.js',
vue: 'vue/dist/vue.js',
};
module.exports = config;
我也尝试过没有成功
.enableVueLoader(function(options) {
options.preLoaders = {
productionMode: true,
};
});
我正在将Webpack Encore 0.20
与Webpack 3
和VueJS 2.5.16
一起使用
答案 0 :(得分:0)
有两种方法可以做到这一点,
在您的webpack.config.js
中,如下更改 vue 的别名:
config.resolve.alias = {
vue: 'vue/dist/vue.min.js',
};
明确关闭开发工具。
import Vue from 'vue'
import App from './App'
Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
最后,您确实需要在生产模式下构建应用程序:
yarn run encore production