【vue-cli3升級】老專案提速50%（一）

王玲波_柏林發表於2019-03-03
Vue

前言

入職公司到現在差不多一個半月了，負責A業務線，專案涉及運營後臺、A業務客戶端等。之前已經完成了對運營後臺A模組的重構工作，最近也已經初步完成了對A業務客戶端專案的升級，所以今天分享一下新專案基於vue-cli3做工程的升級。

*PS：雖然有點標題黨，但是**50%*這個數字並非空穴來風，後面會有初步資料對比…

另：本人前端小菜，本文不作為任何形式的教程、指南，個人實際工作的分享，不喜勿噴

起因

很多人會問為什麼要做專案升級？這個我也不好描述，每個公司環境不一樣

我也想問為什麼不做升級？大概率是因為懶和怕生產出問題吧，哈哈…

原專案基於 vue-cli2.8.1 + webpack2.2.1 + vue2.4.2 (莫慌，我也感覺很奇怪的版本組合，想一下大概曾經是隻升級了語法吧)，本來打算是將 webpack2升級到 webpack4 ，然後在專案中增加配置 eslint、GitHooks、Mock，真正動手的時候直接另起專案，基於 vue-cli3.3 構建。

動手 => 專案完成共耗時 2.5 天

新老專案初步對比

因為專案未測試上線，所以生成環境執行資料對比缺失。

單看 npm i 和 npm build前後對比，提速 50% 不過分吧

old new
依賴包 1604 1400
install耗時 37.507s 19.547s
build耗時 24517ms 11569ms
dist目標檔案 714.57KB 657.94KB
eslint – standard（recommand嚴格模式）
GitHooks – ✔️
mock整合 – ✔️
其他優化 陸續進行中
…

Vue-cli3 升級

安裝

摘抄 vue-cli 文件

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。
如果你已經全域性安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 解除安裝它。
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

可以使用下列任一命令安裝這個新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製程式碼

安裝之後，你就可以在命令列中訪問 vue 命令。你可以通過簡單執行 vue，看看是否展示出了一份所有可用命令的幫助資訊，來驗證它是否安裝成功。

你還可以用這個命令來檢查其版本是否正確 (3.x)：

vue --version
複製程式碼

建立專案

vue-cli 文件

執行以下命令來建立一個新專案：

vue create my-project
複製程式碼

接下去選取一個 preset。

你可以選預設的包含了基本的 Babel + ESLint 設定的 preset，也可以選“手動選擇特性”來選取需要的特性。

【vue-cli3升級】老專案提速50%（一）

如果你決定手動選擇特性，在操作提示的最後你可以選擇將已選項儲存為一個將來可複用的 preset。

~/.vuerc
被儲存的 preset 將會存在使用者的 home 目錄下一個名為 .vuerc 的 JSON 檔案裡。如果你想要修改被儲存的 preset / 選項，可以編輯這個檔案。

在專案建立的過程中，你也會被提示選擇喜歡的包管理器或使用淘寶 npm 映象源以更快地安裝依賴。這些選擇也將會存入 ~/.vuerc。

分享一份該專案的 preset（老專案用的 less，個人更傾向於 stylus、scss）

{
  "useTaobaoRegistry": false,
  "presets": {
     "bolin": {
      "useConfigFiles": false,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "less"
    }
  }
}
複製程式碼

vue create 命令有一些可選項，你可以通過執行以下命令進行探索：

vue create --help
複製程式碼

專案遷移

Package.json包遷移

專案生成後，首先對 package.json 包進行遷移，script 的命令先不著急。

遷移包其實簡單粗暴，將專案中用到的包對號入座進行遷移

static遷移到puclic資料夾，src資料夾替換

老專案的 static 全部遷移到 public 資料夾中，index.html 遷移到 public

在 vue-cli3 ，public 資料夾不會被 webpack 處理，並部署在網站根目錄

官網對public資料夾應用場景的舉例：

  • 你需要在構建輸出中指定一個檔案的名字。
  • 你有上千個圖片，需要動態引用它們的路徑。
  • 有些庫可能和 webpack 不相容，這時你除了將其用一個獨立的 <script> 標籤引入沒有別的選擇。

看一下我專案的 public 應用

【vue-cli3升級】老專案提速50%（一）
複製老專案的 src 資料夾，替換新專案的 src

這裡先替換，暫時不管它

接下來，npm run serve 啟動專案吧

不出意外，肯定會有報錯的，莫慌，按提示一步步更改。

Failed to mount component: template or render function not defined.
[Vue warn]: Failed to mount component: template or render function not defined.
複製程式碼
原因分析：
  • 預設引入vue為runtime版本？
  • require引入元件沒有.default
解決：
  • 根目錄建立 vue.config.js

vue.config.js 介紹請自行看文件吧，碼字好累啊

module.exports = {
  configureWebpack: config => {
    config.resolve.extensions = [`.js`, `.vue`, `.json`]
  },
  chainWebpack: config => {
    config.resolve.alias
      .set(`vue$`, `vue/dist/vue.esm.js`)
      .set(`@`, resolve(`src`))
   }
}
複製程式碼
  • require 元件時加 .default

注意 require 按需引入 vue 元件的時候，後面加上 .default。

例：require(`button.vue`).default

原因：原先webpack 在打包 export default 匯出的內容結果都是：

{
  default: {
    // 內容
  }
}
複製程式碼

webpack3+ 打包的內容結果是：

{
  // 內容
}
複製程式碼
Autoprefixer applies control comment to whole block, not to next rules.
/* autoprefixer：off */
...
/* autoprefixer：on */

修改為
/* autoprefixer：ignore next */
...
複製程式碼
You should write display: flex by final spec instead of display: box
display: flex
代替
display: box
複製程式碼
eslint報錯

因為老專案並未啟用 eslint，跑了下 npm run lint，errors大概有 1000+，花了半天時間修復了所有錯誤。

提供一份 eslint 配置和 vscode 設定中 eslint 的處理（這個其實在我之前的回顧兩年前整理的前端規範中有描述）

.eslintignore

src/assets
src/lib
src/ngmmdebug.js
dist/
output.js
複製程式碼

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  `extends`: [
    `plugin:vue/recommended`,
    `eslint:recommended`,
    `standard`
  ],
  rules: {
    `camelcase`: [0, {
      `properties`: `always`
    }],
    `no-console`: `off`,
    `no-debugger`: `off`
  },
  parserOptions: {
    parser: `babel-eslint`
  }
}
複製程式碼

vscode設定eslint相關

	"eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
複製程式碼

碼字好累啊，還是敲程式碼自在

碼字好累啊，要放飛自我啊

碼字好累啊，今天週六啊！我的週末在哪裡

後面會是更多的升級問題修復以及webpack優化的工作描述，未完待續~~~

相關文章