如何使用webpack 2.7将Vue.js置于生产模式？

Question

我有一个现有的代码库,其中Vue.js存在性能问题.我也在浏览器控制台中看到了这个通知:

所以我想一个简单的解决办法就是将Vue置于生产模式.

在建议的链接中,我尝试按照webpack的说明进行操作.我们在Webpack 2.7版本上(目前的稳定版本是4.20).在说明中它说在Webpack 3及更早版本中,您需要使用DefinePlugin:

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

所以在我的package.json中我定义了一个构建脚本:

为生产yarn run build而构建我运行它运行一个build.js文件(粘贴在这里),然后调用webpack.base.conf.js(粘贴在这里)和webpack.prod.conf.js(粘贴在这里).

正如您在粘贴中看到的,我使用DefinePlugin了文档建议的内容.

我还找到了一个名为vue-loader.conf.js(粘贴在这里)的文件,并确保我也在其中添加了DefinePlugin.

我可以运行yarn run build哪个目的没有错误,但是当通过Apache服务站点并打开浏览器时,它仍然显示我们处于开发模式的通知.

为了确保它实际上使用了webpack创建的文件,我完全删除了文件夹/public/webpack/并检查了webinterface没有正确加载而没有丢失的文件,然后再次构建以查看命令完成后是否正确加载.所以它确实使用了这个webpack进程构建的文件.但是Vue实际上并不是在生产模式下创建的.

有谁知道我在这里做错了什么？欢迎所有提示!

Answer 1

正如我怀疑的那样，问题可能出在您的“webpack.base.conf.js”中，谢谢您的分享，经过搜索，我发现了一个解决您在 github 上的“未检测到生产”问题的问题

该解决方案要求您更改'vue$': 'vue/dist/vue'为'vue$': vue/dist/vue.min生产环境。

你会发现原来的答案是：

@ozee31 这个别名'vue$': 'vue/dist/vue'导致问题，在生产环境中使用vue/dist/vue.min 。