如何將Vue CLI2升級至Vue CLI3

今天就跟大家聊聊有關如何將Vue CLI2升級至Vue CLI3，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

1. 卸載與安裝

npm uninstall vue-cli -g

npm install -g @vue/cli

注：若要使用 Vue CLI 3，需將 Node 版本升級至 8.9 及以上。

當使用 nvm 管理 node 版本時，可以使用如下方式切換至需求的 Node 版本：

# 安裝 >= 8.9 的某個版本
nvm install 8.12.0

# 在當前 session 中使用該版本
nvm use 8.12.0

# 設置默認的 Node 版本
nvm alias default 8.12.0

2. 環境變量與多環境配置

2.1 環境變量

在 Vue CLI 2.x 中，如果需要定義環境變量，需要在 build/webpack.dev.conf.js 中加入：

plugins: [
 new webpack.DefinePlugin({
 'process.xxx': "'some value'",
 })
]

而在 Vue CLI 3.x 中，我們可以使用配置文件的方式便捷的進行配置：

在項目中新建 .env 文件，寫入

VUE_APP_KEY=VALUE

即可在需要的地方使用 process.env.VUE_APP_KEY 調用了。注意，這里環境變量必須以 VUE_APP_ 開頭。

2.2 多環境配置

配置文件同樣支持多環境，即 .env.development 文件表示 development 環境；.env.production 文件表示 production 環境。

在使用 npm 命令時，可以通過指定 --mode xxx 來啟用某一環境的環境變量。

注：.env 文件為所有環境的公用環境變量。

2.3 本地多環境配置

在 Vue CLI 3 中，聲明了對 .env.*.local 不進行 Git 版本控制。

對于一些無需上傳到代碼倉庫的配置，可以使用這一方式。

3. 靜態資源文件

Vue CLI 3.x 將默認資源文件根路徑放到了 /public 目錄下，而默認精簡掉了 2.x 版本中的 /static 目錄。因而之前放置于 /static 目錄中的資源文件及其引用位置需要做些調整。

4. 在 WebStorm 中配置對 @ 符號的支持

默認情況下，JetBrains 系列的 IDE 無法對 Vue 指定的 @ 符號進行正確的路徑識別。此時我們可以在項目根文件夾下創建 webpack.config.js 文件，并寫入：

module.exports = {
 resolve: {
 alias: {
  '@': require('path').resolve(__dirname, 'src')
 }
 }
};

之后，在 IDE 中指定該文件路徑：

之后，IDE 便能正確識別 @ 所表示的路徑了。

5. 添加全局 Scss 文件

在前端項目中，經常會用到相同的主題色。此時，我們需要存儲這些變量，且將其全局引入。

在 Vue CLI 3 中，我們可以在根目錄下新建一個 vue.config.js 文件，寫入如下內容:

module.exports = {
 css: {
 loaderOptions: {
  sass: {
  data: `@import "@/styles/settings.scss";`
  }
 }
 }
};

此時，settings.scss 該文件中的變量值便能在任意 Vue 組件中使用了。

當然，如果要在 .vue 文件中使用 SCSS 語法，需要在 <style> 標簽中增加如下屬性：

<style scoped lang="scss" type="text/scss">

</style>

6. 調整 ESLint 配置

ESLint 對未使用的變量和函數參數都做了限制，但原項目中確實有些地方需要保留這些 “暫時用不上” 的變量，因而這里對默認的 ESLint 設置做了調整，即修改 .eslintrc.js 文件：

{
 ...
 
 rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'vue/no-unused-vars': 'off',
 'vue/no-empty-pattern': 'off'
 },
 
 ...
}

7. Compiler 模式變更為 Runtime 模式

在升級至 Vue CLI 3 之后，直接運行可能會出現如下報錯：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

這是因為 3.x 版本默認使用的是運行時模式，需要對 main.js 文件進行修改：

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app');

將其改為上述方式即可。

8. 配置 lodash 使其模塊化加載

在項目中，如果使用如下方式引入 lodash：

import _ from 'lodash';

那么，即使只使用了其中的 _.get() 方法，也會將全部的 lodash 依賴壓縮到 .js 文件中。這不是我們期望的。

此時，我們可以通過如下方式，使其能夠在這種引入方式下，也能自動實現模塊加載：

首先，安裝如下依賴：

npm install babel-plugin-lodash --save-dev

然后在 babel.config.js 中添加如下內容：

module.exports = {
  ...
  
  plugins: [
    'lodash'
  ]
  
  ...
};

9. 配置 analyzer

我們可以使用 analyzer 分析項目編譯后的文件組成，以便進行加載速度優化。

首先安裝依賴：

npm install webpack-bundle-analyzer --save-dev

然后在 vue.config.js 中添加如下配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  ...
  
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  },
  
  ...
};

然后在 package.json 中添加新的命令：

"analyze": "npm_config_report=true npm run build"

之后，便可以執行以下語句來查看項目編譯后文件大小組成了：

npm run analyze

注：采用這種方式后，每次 npm run dev 或 npm run build 都會自動彈出分析頁面。

如果不想這么做，可以直接使用如下方式（ 無需安裝 webpack-bundle-analyzer 依賴 ）：

"analyze": "vue-cli-service build --report"

當執行 npm run analyze 后，/dist 文件夾下會生成 report.html 分析報告頁面。

10. 引入外部 CDN

我們可以使用 CDN 來加速部分第三方依賴的加載速度，而不是把它們全部打包到一起。

在使用 script 標簽引入需要的 .js 文件后，在 vue.config.js 文件增加如下配置：

module.exports = {
  ...
  
  configureWebpack: {
    externals: {
      "echarts": "echarts",
    }
  },
  
  ...
}

即可在需要的地方按如下方式使用了：

import echarts from 'echarts';

11. 忽略編譯文件大小限制警告

當執行 npm run build 時，會出現警告信息：

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

此時，我們可以在 vue.config.js 中添加如下配置，忽略這條警告信息：

module.exports = {
  ...
  
  performance: {
    hints: false
  }
  
  ...
};

看完上述內容，你們對如何將Vue CLI2升級至Vue CLI3有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。