我在让VueJS2(2.2.0)在生产模式下运行时遇到问题.消息"您正在开发模式下运行Vue."总是出现在控制台上,即使我在生产模式下使用webpack构建它.根据https://vuejs.org/v2/guide/deployment.html,在生产模式下运行webpack就足够了,所有的东西都在缩小,所以webpack似乎"知道"它在生产模式下运行,但vueJs没有配合.

我的网页包配置如下所示:

let webpack = require('webpack');
let path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
      vendor: ['vue', 'axios']
    },
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: "[name].js",
    publicPath: './public',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
        }
      }
    }
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  }
};

为了构建用于生产的缩小文件,我运行:

webpack --mode=production --hide-modules

在运行webpack(4.11.1)之前,我还try 手动将NODE_ENV设置为"production",但没有区别...

我错过了什么?

推荐答案

设置别名vue/dist/vue.js时,使用的文件始终处于开发模式.将别名更改为vue/dist/vue.min.js,您将处于生产模式.

您可以将Vue的版本设置为与生成环境相匹配.本例假设生产构建将process.env.NODE_ENV设置为production,因此您需要确保使用本例时确实如此.

...
resolve: {
  alias: {
    vue: process.env.NODE_ENV == 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
  }
}

参考this Github issue.

Vue.js相关问答推荐

Vue3:如何在功能组件中重用插槽vnode

vue3中的转换可以在滑入但不能滑出时工作

带 Bootstrap 的 Vue js,导航栏菜单不起作用

Vuetify右侧并排switch

Vue3外部数组的响应性

VSelect - Select 不适用于 Vuetify 3 中的自定义项目插槽

vue3 + pinia:如何从?store 中获取一个值

vue router/:param 斜杠的参数

使用 Vue.js 清除数组内容和react性问题

是否可以让 html-webpack-plugin 从 css 生成