cli.vuejs（clivuejsorg）

• 1、在vue-cli3.0中配置webpack
• 2、一篇文章說清 webpack、vite、vue-cli、create-vue 的區別
• 3、VueCLI3打包優化–抽離依賴包
• 4、Vue兼容ie9+
• 5、Vue項目打包發布至npm
• 6、Vue CLI內網安裝（禁止運行vue指令解決方案）

在vue-cli3.0中，對各種配置文件進行了合併，若要進行webpack相關配置，需要在項目根目錄下新建vue.config.js文件

在 vue.config.js 中的 configureWebpack 選項提供一個對象：

提示：有些webpack設置選項是基於vue項目設置的，為了保證vue可以正常工作，某些webpack的配置需要遵從vue提供的配置選項，例如

如果你熟悉webpack，你已經可以開始配置項目了

擴展：鏈式操作—jquery那般的鏈式書寫方式

官方文檔：

先看這個表格：

是不是有了一個整體的感覺？我們再來詳細的看一下。

官網：

vue-cli 是 Vue 早期推出的一款腳手架，使用 webpack 創建 Vue 項目，可以選擇安裝需要的各種插件，比如 Vuex、VueRouter等。

vue-cli 用於創建 vue2 的項目；

@vue/cli 用於創建 vue3 的項目，當然也支持 vue2。

使用起來還是比較繁瑣的，首先要安裝腳手架，然後使用 vue create hello-world 創建項目，具體的就不介紹了。

官網：

create-vue 是 Vue3 的專用腳手架，使用 vite 創建 Vue3 的項目，也可以選擇安裝需要的各種插件，使用更簡單。

然後我們可以選擇需要的各種插件：

官網：

使用 vite 不僅可以創建 vue 的項目，而且可以創建 react 等項目，只是需要手動安裝第三方插件，有點麻煩。

目前支持的模板預設如下：

官網：

rollup 是一種打包工具，特點就是，打的包非常精簡，體積小。

官網是英文的，中文資料也比較少，不過好在常規用法可以參考 vite的官網。

尤雨溪在知乎的一次回答（ ）里提到：

webpack 是一個全能選手，啥都能幹，只是有點複雜，對新手不太友好。

Rollup 是後起之秀，打包更簡潔。

vite 把 rollup 變成了「開袋即食」，便於新手入門。

create-vue 基本取代了 vue-cli，除非你想創建 vue2 的項目。

所以，想創建一個 vue3 的項目，首選 create-vue，非常方便快捷，建立的項目也可以統一風格。

項目開發中，使用了很多依賴包，如 Vue 、路由管理 Vue-router 、狀態管理 Vuex 、UI組件庫( ElementUI 、 Vant )、圖表（ echarts ）等。打包構建，發現有一些包體積過大，會影響首頁載入速度。如下所示：

從上圖的分析包中，可以將以下插件抽離：

需要刪除的依賴包

VueCLI3自帶了 webpack analzer ,可通過如下命令即可生成分析包內容，在 dist/report.html

更多請查看：

減少打包體積、加快打包速度，常規的優化有以下兩種：

按需載入是通過只引用使用的組件來減少體積，這就會有一個問題：如果項目重度依賴第三方插件（如 ElementUI 、 vant ），那麼此方案將無法減少打包的體積。

這裡選擇CDN的方式， 配置流程 ：

可根據環境變數，僅在線上採取使用CDN,開發環境直接使用npm依賴包即可。

進行包分離以後，打包結果：

vue.config.js 的pages為：

修改如下的地方：

外部擴展(externals)

使用webpack的externals來指定echarts無法減少包的大小

vue-cli利用webpack-bundle-analyzer分析構建產物

首先說明一下我在這裡使用的是vue-cli3創建的項目，不同版本的配置可能略有差異，不過一切以官方文檔的為準，在這裡先貼出vue-cli文檔鏈接，因為文檔說明還是挺詳細的。

進入正題，這裡說明一下本文實現兼容應用的是 Babel7.4.0 之前的版本，7.4.0版本前轉碼主要應用到的工具還是 @Babel/polyfill ，由於Babel默認只轉換新的javascript語法，不支持新的Api（如Set，Map，Promise），所以還需要引入 cors.js ，這個項目中沒有使用到Generator函數所以不需要引入 regenerator-runtime ，首先用vue-cli3創建的項目package.json文件中有 browserslist 這個欄位或是在項目根目錄有一個 .browserslistrc 文件，這裡是用來指定可用瀏覽器的範圍，關於指定瀏覽器版本配置可以參考這裡 。順便貼出目前我的配置。

可以在終端運行 npx browserslist 查詢當前已選擇了那些瀏覽器

一個用vue-cli創建的項目中默認會使用 @vue/babel-preset-app ，我們可以在node_modules @vue babel-preset-app package.json文件中看到配置了core.js，

沒有在entry入口文件進行配置@babel/polyfill網頁打開發現很多es6新的Api是不支持的。

此文章作為學習和記錄，如果有問題或是不對的地方歡迎各位大佬指出，感激不盡！

新建一個項目，在根目錄創建兩個文件夾 packages 和 examples

將原項目中 components 下所有組件複製到新項目的 packages 目錄下，如果有字體圖標，將字體圖標也一併放到 packages 目錄下

packages/index.js

main.js

必須在 new Vue() 方法前調用 use 方法註冊插件

Vue CLI提供了將Vue項目打包成庫的命令，官方文檔地址

package.json

在 package.json 中新增一條打包命令，其中 packages/index.js 指定打包入口文件

默認情況下該命令不會將 Vue 打包進去，因為任何引用我們庫的Vue項目都默認包含 Vue ，如果使用文件或者CDN方式引入我們的庫，則需要使用者手動引入 Vue 。可以通過添加 –inline-vue 參數來內置 Vue 。 –name 來指定打包後的名字。

運行打包命令

package.json

其中 name 不能在 npm 上已經存在， private 必須設置為 false ，否則發布會失敗， main 指定的是 import 我們的庫時默認導入的文件

如果包的名字已經被其他人使用了，可以聲明所有者信息來避免重名衝突。有兩種方式來實現，第一種，手動修改 package.json ，將 name 修改為 @username/package-name 。第二種，推薦在新項目中使用， npm init –scope==username 。這個時候，發布包的命令也要進行修改

.npmignore

定義哪些文件在上傳到npm時會被忽略。一般而言， examples 是包含測試的文件， packages 是源碼， public 是一些靜態文件，這些對庫的使用者來說意義不大，可以不上傳到npm

如果使用了第三方npm源，必須改回npm官方源

切換回官方源命令為 nrm use npm

登錄

發布

取消發布

發布時遇到錯誤時可能是以下原因導致的:

安裝

全局導入

使用組件

1、Vue cli簡介：

Vue cli是一個基於Vue.js 進行快速開發的完整系統，Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基於智能的默認配置即可平穩銜接，這樣你可以專註在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject。

cli(@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue命令。它可以通過vue create快速搭建一個新項目，或者直接通過vue serve構建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項目。

2、 Vue cli安裝

npm install -g @vue/cli

安裝之後，運行vue指令，遇到以下問題：由於公司內網執行策略限制，會禁止運行vue指令。

解決方案及步驟如下：

第一步：執行Set-ExecutionPolicy RemoteSigned更改執行策略。

第二步：如果沒有許可權更改全局的執行策略，加上-Scope CurrentUser後再次更改（Set-ExecutionPolicy RemoteSigned -Scope CurrentUser），並為ExecutionPolicy參數提供值為：RemoteSigned。

第三步：執行策略更改完成後，成功運行vue指令。