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

时间 2019-12-10

标签 webpack 打包 vue 应用正式环境去除警告信息繁體版

原文原文链接

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

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

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

/* 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元素上，若是绑定在了这两个元素上，而且运行环境不是生成环境就会显示下边的警告信息。html

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

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

webpack 的相关配置以下java

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

运行了，结果没什么用，仍是有输出通过一番搜索以后发现：webpack

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

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

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

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

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

vue中检测运行环境示例

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

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

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

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