前言

最近公司的項目終于到了空閑期，而閑不住的我終于把目標(biāo)放到了項目的遷移上面

因為公司的項目比較早的原因（雖然當(dāng)時vue-cli也出來了一段時間，但是不敢輕易嘗試?。。?/p>

所以使用的環(huán)境還是 vue2.x 版本的，而又因為公司的前端項目都是我來搭建的原因（并不是技術(shù)大佬，入職早！）

所以所有項目開發(fā)的時候一直在用的 vue-cli2.0，后來項目多了也沒時間就沒往 vue-cli3.0 遷移

現(xiàn)在終于到了空閑期，可以嘗試著慢慢遷移了

本篇文章就是主要記錄遷移的過程和 vue-cli3.0 的搭建過程

一、升級本地環(huán)境

因為 vue-cli3.0 要 nodeJs ≧ 8.9（官方推薦 8.11.0+），所以我們先去 官網(wǎng)下載 一個穩(wěn)定的新版本覆蓋本地版本

我安裝的是 node12.13.0 版本，因為之前我本地全局安裝了 2.0 的環(huán)境，所以需要全局卸載再安裝 3.0

npm uninstall -g vue-cli
 
npm install -g @vue/cli

安裝好了之后輸入 vue -V 查看版本

我我我草！?。∽罱活欀醇夹g(shù)了，沒發(fā)現(xiàn)10月16日官方已經(jīng)宣布 vue-cli4.0 已經(jīng)正式發(fā)布了?。?！

有沒有搞錯，我 vue-cli3.0 還沒來得及用上呢！還好看了下文檔，除了跟 vue-cli3.0 的目錄有點(diǎn)變化其他沒變。

那就直接開始搞 vue-cli4.0 吧！

二、搭建項目

vue-cli3.0 以后項目創(chuàng)建的命令變成了下面這樣

vue create <Project Name> //文件名 不支持駝峰（含大寫字母）

竟然還被嫌棄了我的網(wǎng)速，我還就不用 cnpm 了！

選擇不使用淘寶鏡像后，選擇手動配置

default 是使用默認(rèn)配置

Manually select features 是自定義配置

我的自定義配置如下

選擇是否使用路由 history router，其實(shí)直白來說就是是否路徑帶 # 號，建議選擇 N，否則服務(wù)器還要進(jìn)行配置

css 的預(yù)處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動編譯實(shí)時的，dart-sass需要保存后才會生效

sass 官方目前主力推 dart-sass 最新的特性都會在這個上面先實(shí)現(xiàn)

選擇 ESLint 代碼校驗規(guī)則，提供一個插件化的javascript代碼檢測工具，ESLint + Prettier 使用較多

然后選擇什么時候進(jìn)行代碼校驗，Lint on save 保存就檢查，Lint and fix on commit fix 或者 commit 的時候檢查，建議第一個

下面就是如何存放配置了，In dedicated config files 存放到獨(dú)立文件中，In package.json 存放到 package.json 中

本著項目結(jié)構(gòu)簡單的想法，我選擇了第二個

最后就是是否保存本次的配置了，N 不記錄，如果選擇 Y 需要輸入保存名字

我這里就不保存了，原因是熟能生巧！哈哈哈

然后就等待創(chuàng)建項目吧

出現(xiàn)如圖紅框所示的提示，就搭建成功，進(jìn)入項目目錄，直接輸入 npm run serve 就可以了

你以為這樣就完了嗎？我也是這樣認(rèn)為的，可它不是這樣的！

很明顯，雖然項目能夠正常啟動，但是我的 nodeJs 版本用的太高了，然后我給回退到了 11.11.0 版本

雖然沒影響太大的影響，但是我不想看見 WARN！回退之后，重新跑項目就不會有問題了。

三、環(huán)境配置

下面就是關(guān)于項目的環(huán)境配置了，我這邊一般喜歡用 test、preview、production分別表示測試，預(yù)覽，生產(chǎn)三種環(huán)境

修改 package.json 文件如下

"scripts": {
  "serve": "vue-cli-service serve",
  "test": "vue-cli-service build --mode test",      //測試
  "preview": "vue-cli-service build --mode preview",   //預(yù)覽
  "build": "vue-cli-service build --mode production",  //生產(chǎn)
  "lint": "vue-cli-service lint"
},

在項目根目錄下新建 .env.test、.env.preview、 .env.production 文件，分別對應(yīng)三個環(huán)境的配置文件，注意，名字要與 --mode 后面的名字分別對應(yīng)

.env.test 代碼如下

NODE_ENV="test"
VUE_APP_BASE_URL="測試環(huán)境域名"

.env.pre 代碼如下

NODE_ENV="preview"
VUE_APP_BASE_URL="預(yù)覽環(huán)境域名"

.env.prod 代碼如下

NODE_ENV="production"
VUE_APP_BASE_URL="生產(chǎn)環(huán)境域名"

ok，這樣環(huán)境就配置好了，分別用以下命令來打包不同環(huán)境的包就可以了

npm run test  //測試
npm run pre   //預(yù)發(fā)布
npm run prod  //生產(chǎn)

另外需要說明一點(diǎn)的是，本地環(huán)境會默認(rèn)從 .env.development 文件中讀取配置

所以記得有需要記得新建一個然后存放配置

我的 .env.development 代碼如下

NODE_ENV="development"
VUE_APP_BASE_URL="本地環(huán)境域名"

四、項目配置

從 vue-cli3.0 開始 build 和 config 目錄就取消了，如果需要修改配置，可以在項目的根目錄新建一個 vue.config.js 文件來覆蓋項目的配置，因為項目的配置比較多，這里就不分別介紹了，可以 訪問官方文檔

五、項目遷移

剩下的就是比較簡單的工作了，因為 2.0/3.0/4.0 的src目錄是基本一致的，所以照著原來的項目搬進(jìn)來就可以了

唯一需要注意的就是路徑的問題了

結(jié)束語

本來，這個文章真的是為了從 2.0 遷移到 3.0 的，沒想到 4.0 都發(fā)布了，那剛好遷移到 4.0 得了

文章標(biāo)題我會修改為 4.0，但是文章內(nèi)可能還會有 3.0 我就不修改了

一是證明我的最初想法，二是感慨前端的發(fā)展速度！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。