如何使用webpack 2.7将Vue.js置于生产模式？ [英] How to put Vue.js in production mode using webpack 2.7?

问题描述

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

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

在

为生产而构建我运行纱线运行构建并运行 build.js 文件（粘贴此处）反过来调用 webpack.base.conf.js （粘贴在这里）和 webpac k.prod.conf.js （粘贴在这里）。

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

我还找到了一个名为 vue-loader.conf.js 的文件（粘贴在这里）并且确保我也在那里添加了 DefinePlugin 。

我可以运行纱线运行构建结束没有错误，但是当通过Apache服务网站并打开浏览器时它仍会显示通知我们处于开发模式。

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

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

解决方案

问题可能出在我怀疑的'webpack.base.conf.js'中，谢谢你分享它，在搜索时我发现一个问题解决你在github上的'生产未被发现'问题此处

解决方案要求您更改'vue $'：'vue / dist / vue'到'vue $'：vue / dist / vue.min 正在制作中。

你会发现原始答案为：

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

I've got an existing code base in which Vue.js has performance problems. I also see this notice in the browser console:

so I guess an easy fix could be to put Vue into production mode.

In the suggested link I try to follow the instructions for webpack. We're on Webpack version 2.7 (current stable version is 4.20). In the instructions it says that in Webpack 3 and earlier, you’ll need to use DefinePlugin:

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

So in my package.json I've got a build script defined:

To build for production I run yarn run build and it runs a build.js file (paste here) which in turn calls webpack.base.conf.js (paste here) and webpack.prod.conf.js (paste here).

As you can see in the paste I use the DefinePlugin as suggested by the docs.

I also found a file called vue-loader.conf.js (paste here) and to be sure I also added the DefinePlugin in there as well.

I can run yarn run build which ends without errors, but when serve the site over Apache and open the browser it still shows the notification that we're in development mode.

To be sure it actually uses the files created by webpack I completely removed the folder /public/webpack/ and checked that the webinterface didn't load correctly without the missing files and then built again to see if it loaded correctly after the command finished. So it does actually use the files built by this webpack process. But Vue is actually not created in production mode.

Does anybody know what I'm doing wrong here? All tips are welcome!

解决方案

The problem may be in your 'webpack.base.conf.js' as i suspected, thank you for sharing it, upon searching i've found an issue resolving your 'production not being detected' problem on github here

The solution requires that you change 'vue$': 'vue/dist/vue' to 'vue$': vue/dist/vue.min in production.

You will find the original answer as:

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

这篇关于如何使用webpack 2.7将Vue.js置于生产模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！