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

Question

我有一个现有代码库，其中 Vue.js 存在性能问题。我还在浏览器控制台中看到此通知：

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

在 the suggested link 中，我尝试按照 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 文件 (paste here) which in turn calls webpack.base.conf.js (paste here) and webpack.prod.conf.js (paste here)。

正如您在粘贴中看到的那样，我按照文档的建议使用 DefinePlugin。

我还找到了一个名为 vue-loader.conf.js (paste here) 的文件，为了确保我也在其中添加了 DefinePlugin。

我可以运行 yarn run build 结束时没有错误，但是当通过 Apache 提供站点并打开浏览器时，它仍然显示我们处于开发模式的通知。

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

有人知道我做错了什么吗？欢迎所有提示！

Answer 1

正如我所怀疑的那样，问题可能出在您的 'webpack.base.conf.js' 中，感谢您的分享，在搜索后我发现了一个问题，解决了您在 github 上的 'production not being detected' here

解决方案要求您在生产中将 'vue$': 'vue/dist/vue' 更改为 'vue$': vue/dist/vue.min。

您会发现原始答案为：

@ozee31 This alias 'vue$': 'vue/dist/vue' cause the problem, use vue/dist/vue.min in production environment.

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

How to put Vue.js in production mode using webpack 2.7?

javascript

vue.js

npm

webpack

yarnpkg