如何使用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），该文件依次调用webpack.base.conf.js（paste here）和{{ 1}}（paste here）。

如您在粘贴中所见，我使用了文档建议的webpack.prod.conf.js。

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

我可以运行DefinePlugin，它的结尾没有错误，但是当通过Apache服务该站点并打开浏览器时，它仍然显示我们处于开发模式的通知。

为确保它实际上使用了webpack创建的文件，我完全删除了文件夹yarn run build，并检查了没有缺少文件的Web界面是否正确加载，然后再次构建以查看是否在加载后正确加载了该界面命令完成。因此，它实际上使用了此Webpack流程生成的文件。但是Vue实际上不是在生产模式下创建的。

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

Answer 1

问题可能出在我怀疑的“ webpack.base.conf.js”中，谢谢您的分享。在搜索后，我发现一个问题可以解决您在github {{3上未检测到生产”的问题}}

该解决方案要求您在生产中将import React, { Component } from "react"; import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; import { withStyles } from '@material-ui/core/styles'; import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; import { InputLabel, FormControl } from "@material-ui/core"; const styles = theme => ({ fullWidth: { width: "100%" } }); class InstitutionSelect extends Component { constructor(props) { super(props); this.state = { selectOptions: [ { value: "blablabla", id: "1" }, ], selectedValue: "", }; } renderSelectOptions = () => { return this.state.selectOptions.map((option, i) => ( <MenuItem key={option.id} value={option.id}> {option.value} </MenuItem> )); }; handleChange = event => { this.setState({ selectedValue: event.target.value }); }; render() { const { classes } = this.props; return ( <MuiThemeProvider> <FormControl className={classes.fullWidth}> <InputLabel>Institution</InputLabel> <Select value={this.state.selectedValue} onChange={this.handleChange} > {this.renderSelectOptions()} </Select> </FormControl> </MuiThemeProvider> ); } } export default withStyles(styles)(InstitutionSelect); 更改为'vue$': 'vue/dist/vue'。

您将找到原始答案为：

  

@ ozee31此别名'vue $'：'vue / dist / vue'引起了问题，请在生产环境中使用 vue / dist / vue.min 。 / p>