代码之家 › 专栏 › 技术社区 › Jérôme

如何使用Webpack Encore设置VueJS生产模式

production-environment vuejs2 vue.js webpack

Jérôme · 技术社区 · 6 年前

我正在尝试使用WebpackEncore为Vuejs设置生产模式。所以我指定了一个新的插件,正如文档所说,但这似乎没有改变任何东西。

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production'),
}),

我尝试了多种不同的语法 NODE_ENV 设置但似乎没有任何效果

我错过什么了吗?我的网络包配置如下

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

1 回复 | 直到 6 年前

Niket Pathak 6 年前

有两种方法可以做到这一点,

在你 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

Reference Tutorial

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

3 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

3 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前