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

NicolasHe 发布于2019-08-21 16:46 / 3308人阅读

摘要：打包时指定从而不显示警告等信息有一些信息的输出建议使用进行代码压缩，在压缩的时候指定不输出信息。

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  or  - 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",
    }
  }
  ...
}

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

云服务器 GPU云服务器 Webpack打包分块怎么在linux 下搭建lnmp环境安装cordova时警告在阿里云ecs 服务器的lamp 环境下php 扩展imap

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88708.html

webpack选择性编译DefinePlugin（打包自动剔除测试数据）

摘要：选择性编译是指根据打包是环境的不同，选择性地让特定的语句有效，让特定的语句无效。选择性编译是笔者自己瞎想出来的名词，不知道用的对不对。检测时，还没有被替换掉。背景程序在开发的过程中，少不了打印调试用的日志，测试流程时伪造的数据。这些代码是不能出现在生产环境上的。这意味着在程序打包前，需要把相关代码剔除掉。这些事情用人手去做很麻烦，很容易疏漏。而且打包出来测试时遇到了bug，又得重新...

王军 2019-08-21 17:00 评论0 收藏0
从零开始：一个正式的vue+webpack项目的目录结构是怎么形成的

摘要：一个持续可发展，不断加入新功能，方便后期维护的目录结构究竟是长什么样子的接下来闰土大叔带你们一起手摸手学起来。如何从零开始一个vue+webpack前端工程工作流的搭建，首先我们先从项目的目录结构入手。一个持续可发展，不断加入新功能，方便后期维护的目录结构究竟是长什么样子的？接下来闰土大叔带你们一起手摸手学起来。初级前端初始化目录篇项目伊始，我们肯定是先在terminal终端命令...

liangdas 2019-08-22 16:14 评论0 收藏0
一步一步创建vue2.0项目（一）

摘要：一步一步创建项目已经发正式版本了，来研究一下吧新建一个文件夹。文件内容本身是一个字符串，不仅仅是一个对象。代码如下下一步开始创建文件。一步一步创建vue2.0项目 vue2.0已经发正式版本了，来研究一下吧新建一个文件夹 vue2.0-learn 。_前提是默认已经安装了nodejs和npm_ npm init 按照步骤初始化package.json，这个文件提供了这个项目需要...

ranwu 2019-08-20 15:58 评论0 收藏0
一字一句的搞懂vue-cli之vue webpack template配置

摘要：神一样的存在。所以呢，就利用两天时间，参考了一些他人的文章，查阅了一些官方的配置，就在此先稍微记录一下。这份配置解析是基于最新版本的。不过，我非常建议，先别看我的文章，自己一句一句的通读一遍。和中的配置含义相似。 webpack--神一样的存在。无论写了多少次，再次相见，仍是初见。有的时候开发vue项目，对尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的东西，真的很不想折...

atinosun 2019-08-22 11:20 评论0 收藏0
vue-cli 目录结构详细讲解

摘要：前端开发过程中需要使用到后台的的话，可以通过配置来将相应的后台请求代理到专用的服务器。主要完成下面几件事情合并基础的配置配置样式文件的处理规则，配置的输出配置插件模式下的插件配置分析说明插件里面多了丑化压缩代码以及抽离文件等插件。 [toc] 目录结构预览 ├─build // 保存一些webpack的初始化配置,项目构建 │ ├─build.js ...

GHOST_349178 2019-08-02 14:03 评论0 收藏0