时间戳

首页 > 解决方案 > 如何使用 webpack 2.7 将 Vue.js 置于生产模式？

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

问题描述

我有一个现有的代码库，其中 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( paste here ) 的文件，并确保我也在其中添加了该文件DefinePlugin。

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

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

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

标签： javascriptvue.jsnpmwebpackyarnpkg

解决方案

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

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

你会发现原来的答案是：

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

推荐阅读