webpack打包vue應用時，在正式環境下去除警告等信息

NicolasHe 發布于2019-08-21 16:46 / 3563人閱讀

摘要：打包時指定從而不顯示警告等信息有一些信息的輸出建議使用進行代碼壓縮，在壓縮的時候指定不輸出信息。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/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