Vue CLI 2 升級至 Vue CLI 3

時間 2019-12-08

標籤 vue cli 升級简体版

原文原文鏈接

Vue CLI 2 升級至 Vue CLI 3

如下備忘升級至 Vue CLI 3.x 版本後，將項目目錄改成新結構時所需作的一些改動。

1. 卸載與安裝

npm uninstall vue-cli -g

npm install -g @vue/cli

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

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

# 安裝 >= 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 中加入：html

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

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

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

VUE_APP_KEY=VALUE

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

2.2 多環境配置

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

在使用 npm 命令時，能夠經過指定 --mode xxx 來啓用某一環境的環境變量。react

注：.env 文件爲全部環境的公用環境變量。webpack

2.3 本地多環境配置

在 Vue CLI 3 中，聲明瞭對 .env.*.local 不進行 Git 版本控制。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
    }
    
    ...
};

12. 使用 webpackChunkName 註釋減小編譯的文件個數

爲了不將全部組件打包在一塊兒而形成單個文件過大，一般咱們會使用按需加載的方式引入組件：

const ComponentXXX = () => import('../../pages/xxx/index.vue');

在 Vue CLI 3 默認狀況下，每一個如上方式引入的組件會被編譯爲一個單獨的 JS 和一個單獨的 CSS 的文件。

若是不加處理，當採用如上方式引入的組件數量增多時，可能會在編譯後，獲得幾百個小文件，而每一個文件的大小可能還不到 1 KB。

雖然小文件加載速度快，但因爲瀏覽器每次能創建的鏈接數量有限，大量的小文件一樣會致使首次加載變慢。

此時，咱們可使用以下的方式，將多個組件打包成一個文件：

const ComponentXXX = () => import(/* webpackChunkName: "xxx" */ '../../pages/xxx/index.vue');

如此，咱們即可以在保證分塊打包的前提下，減小編譯的小文件數量。

參考連接

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Vue CLI 2 升級至 Vue CLI 3

Vue CLI 2 升級至 Vue CLI 3

1. 卸載與安裝

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

2.1 環境變量

2.2 多環境配置

2.3 本地多環境配置

3. 靜態資源文件

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

5. 添加全局 Scss 文件

6. 調整 ESLint 配置

7. Compiler 模式變動爲 Runtime 模式

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

9. 配置 analyzer

10. 引入外部 CDN

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

12. 使用 webpackChunkName 註釋減小編譯的文件個數

參考連接

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