webpack打包vue应用时，在正式环境下去除警告等信息-CSDN博客

`webpack`打包`vue`应用时，在正式环境下去除警告等信息

`vue`中检测运行环境示例

vue在运行的时候会检测NODE_ENV是否为production，从而确定是否要进行警告的显示，例如下面是entry-runtime-with-compiler中的一段代码：

/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
  process.env.NODE_ENV !== 'production' && warn(
    `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  )
  return this
}

这一段代码中检测了vue实例是否是绑定到了html或body元素上，如果绑定在了这两个元素上，并且运行环境不是生成环境就会显示下边的警告信息。

`webpack` 打包时指定`NODE_ENV` 从而不显示警告等信息

有一些log信息的输出建议使用uglifyjs进行代码压缩，在压缩的时候指定不输出log信息。

webpack 的相关配置如下

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    })
  ]
  ...
}

运行了，结果没什么用，还是有输出经过一番搜索之后发现：

如果是直接使用的，则应该在开发环境用vue.js，而在正式环境使用vue.min.js
如果是使用webpack的，则应该使用vue.common.js进行替代，我的相关配置如下:

module.exports = {
  ...
  resolve: {
    alias: {
      vue: 'vue/dist/vue.common.js',
    }
  }
  ...
}

然后再进行打包，运行之后发现就没有警告等信息了。

webpack打包vue应用时，在正式环境下去除警告等信息

webpack打包vue应用时，在正式环境下去除警告等信息

vue中检测运行环境示例

webpack 打包时指定NODE_ENV 从而不显示警告等信息

`webpack`打包`vue`应用时，在正式环境下去除警告等信息

`vue`中检测运行环境示例

`webpack` 打包时指定`NODE_ENV` 从而不显示警告等信息