【vue-cli3升級】老項目提速50%（一）

前言

入職公司到如今差很少一個半月了，負責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，也能夠選「手動選擇特性」來選取須要的特性。

若是你決定手動選擇特性，在操做提示的最後你能夠選擇將已選項保存爲一個未來可複用的 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 應用

複製老項目的 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優化的工做描述，未完待續~~~