介紹如何將使用 Vue CLI 2 構(gòu)建的項目升級到 Vue CLI 4

更多精彩

• 更多技術(shù)博客，請移步 IT人才終生實訓(xùn)與職業(yè)進階平臺 - 實訓(xùn)在線

相關(guān)網(wǎng)址

1. 介紹 - Vue CLI
2. 配置參考 - Vue CLI

升級細則

1. 實際升級起來還算比較方便，基本不會影響項目內(nèi)部的邏輯

安裝 Vue CLI 4

1. 按照官方文檔 安裝 - Vue CLI 直接全局安裝即可，之后查看 Vue 版本得到下圖結(jié)果，說明已經(jīng)安裝成功

   • 如果當前安裝了 Vue CLI 的 2.x 版本，官方在上述文檔中也給予提示，需要先卸載，再安裝

     
     

創(chuàng)建新項目

1. 在舊項目上直接升級自然是不太穩(wěn)妥，還是推薦創(chuàng)建一個新的項目，然后逐步將舊項目的內(nèi)容遷移到新項目比較穩(wěn)妥，這樣就算遷移失敗了，舊項目也不會受到影響
2. 首先通過 vue create projectName 創(chuàng)建一個新項目，具體步驟可以參考 創(chuàng)建一個項目 - Vue CLI
   • 指定項目名稱后，其他使用默認配置即可

遷移 package.json

1. 項目創(chuàng)建完之后，需要將舊項目的 package.json 中的依賴項都復(fù)制到新項目的 package.json 中
2. 這時候可以好好檢查一下 dependencies 和 devDependencies 中哪些是需要的，哪些是不需要的，將需要的依賴項復(fù)制到新項目的對應(yīng)節(jié)點即可

遷移靜態(tài)資源

1. 如果舊項目中的 /static/ 目錄下存在靜態(tài)資源，直接全部復(fù)制到新項目的 /public/ 目錄即可
2. 同樣的，舊項目中 index.html 中的內(nèi)容，也可以直接復(fù)制到新項目的 /public/index.html 中

遷移 src 目錄

1. 項目的所有關(guān)鍵內(nèi)容，自然都是在 /src/ 目錄中，然而這個目錄遷移起來幾乎沒有什么成本
2. 直接將舊項目 /src/ 目錄下的所有內(nèi)容，復(fù)制到新項目的 /src/ 目錄即可

創(chuàng)建 vue.config.js ，準備遷移配置

1. Vue CLI 3 之后，官方開始推薦 零配置搭建項目 ，就像 Java 的 SpringBoot 一樣
2. 在 Vue CLI 2 時代，Vue 的項目配置被分散在項目的 /build/ 和 /config/ 目錄中
3. 然而從 Vue CLI 3 開始，所有的配置都被集成到了 vue.config.js 這一個文件中，并且這個文件默認是不被創(chuàng)建的
4. 所以我們首先需要在項目根目錄創(chuàng)建一個 vue.config.js 文件，并且參考 配置參考 - Vue CLI 在文件中添加如下頂層內(nèi)容

module.exports = {
  // ...
}

指定項目在開發(fā)和生產(chǎn)環(huán)境的根請求

1. 如果項目在開發(fā)和生產(chǎn)環(huán)境有不同的根請求，可以在文件中添加 publicPath 進行指定，可以參考 配置參考 - publicPath ，具體如下
   • 這個配置項之前被叫做 baseUrl ，現(xiàn)在已經(jīng)棄用

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/sts/' : '/'
}

遷移項目的開發(fā)環(huán)境配置

1. 之前項目的開發(fā)環(huán)境配置是在 /config/index.js 的 module.exports.dev 節(jié)點下
2. 通常會在這個節(jié)點下配置開發(fā)環(huán)境的 host 、port 以及會通過 proxyTable 配置一些對接后端的端口映射代理
3. 這些這些配置也統(tǒng)一在 vue.config.js 中完成，可以參考 配置參考 - devServer ，具體如下

module.exports = {
  devServer: {
    // 前端請求的鏈接
    host: '127.0.0.1',
    // 前端請求的端口
    port: 3002,
    // 代理
    proxy: {
      '/': {
        target: 'http://127.0.0.1:8099',
        changeOrigin: true,
        pathRewrite: {
          '^/': '/'
        }
      }
    }
  }
}

遷移項目的目錄別名

1. 我們在進行項目開發(fā)時，通常會給常用的目錄指定一些別名，例如 /components/ 組件目錄，完整路徑是 /src/components/
2. 為了在引入對應(yīng)組件時使用更簡潔的引入目錄，會在 /build/webpack.base.conf.js 的 module.exports.resolve.alias 節(jié)點下配置對應(yīng)目錄的別名
3. 現(xiàn)在這個配置自然也是需要在 vue.config.js 中完成，可以參考 配置參考 - chainWebpack ，以及 配置參考 - webpack 相關(guān)
4. 但上述兩份文檔中只描述了 chaninWebpack 字段的基礎(chǔ)內(nèi)容，沒有描述如何配置目錄別名，具體代碼如下
   • 如果有更多目錄需要指定別名，只需要繼續(xù)在后面添加 .set(dirName, resolve(absoluteDirName)) 即可

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: (config) => {
    const alias = config.resolve.alias
      alias.set('@', resolve('src'))
      .set('components', resolve('src/components'))
  }
}

遷移 eslint 配置

1. 根據(jù) Vue CLI3 EsLint Config -CSDN博客 得到以下參考

創(chuàng)建項目時選擇了集成 EsLint

1. Vue 默認會將 EsLint 的配置集成到 package.json 中，代碼如下
2. 將之前項目中 ./eslintrc 中的規(guī)則移植到下圖中的 "rules": {} 節(jié)點即可
   

創(chuàng)建項目時沒有選擇集成 EsLint

1. 只需要將舊項目根目錄下的 ./eslintrc 文件復(fù)制到新項目的根目錄即可
2. 但我的項目在復(fù)制完之后啟動項目時，總是有幾率會拋出這個文件中存在異常的錯誤，所以就在 vue.config.js 中添加了 lintOnSave: false
3. 具體配置可以參考 配置參考 - lintOnSave

開發(fā)環(huán)境啟動項目

1. 如果之前沒有在遷移 package.json 內(nèi)容時，沒有直接進行安裝，則需要先執(zhí)行 npm i 或者 npm install
2. 之后執(zhí)行 npm run serve 即可啟動項目，Vue CLI 2 是通過 npm run dev 啟動的

3. 啟動之后的輸出內(nèi)容也和之前有所不同，如下圖