前言

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

因?yàn)楣镜捻?xiàng)目比較早的原因（雖然當(dāng)時(shí)vue-cli也出來(lái)了一段時(shí)間，但是不敢輕易嘗試啊?。?/p>

所以使用的環(huán)境還是 vue2.x 版本的，而又因?yàn)楣镜那岸隧?xiàng)目都是我來(lái)搭建的原因（并不是技術(shù)大佬，入職早！）

所以所有項(xiàng)目開(kāi)發(fā)的時(shí)候一直在用的 vue-cli2.0，后來(lái)項(xiàng)目多了也沒(méi)時(shí)間就沒(méi)往 vue-cli3.0 遷移

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

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

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

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

我安裝的是 node12.13.0 版本，因?yàn)橹拔冶镜厝职惭b了 2.0 的環(huán)境，所以需要全局卸載再安裝 3.0

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

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

我我我草?。?！最近只顧著看技術(shù)了，沒(méi)發(fā)現(xiàn)10月16日官方已經(jīng)宣布 vue-cli4.0 已經(jīng)正式發(fā)布了?。。?/p>

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

那就直接開(kāi)始搞 vue-cli4.0 吧！

二、搭建項(xiàng)目

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

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

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

選擇不使用淘寶鏡像后，選擇手動(dòng)配置

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

Manually select features 是自定義配置

我的自定義配置如下

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

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

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

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

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

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

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

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

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

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

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

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

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

雖然沒(méi)影響太大的影響，但是我不想看見(jiàn) WARN！回退之后，重新跑項(xiàng)目就不會(huì)有問(wèn)題了。

三、環(huán)境配置

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

修改 package.json 文件如下

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

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

.env.test 代碼如下

NODE_ENV="test"
VUE_APP_BASE_URL="測(cè)試環(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)境就配置好了，分別用以下命令來(lái)打包不同環(huán)境的包就可以了

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

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

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

我的 .env.development 代碼如下

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

四、項(xiàng)目配置

從 vue-cli3.0 開(kāi)始 build 和 config 目錄就取消了，如果需要修改配置，可以在項(xiàng)目的根目錄新建一個(gè) vue.config.js 文件來(lái)覆蓋項(xiàng)目的配置，因?yàn)轫?xiàng)目的配置比較多，這里就不分別介紹了，可以 訪問(wèn)官方文檔

五、項(xiàng)目遷移

剩下的就是比較簡(jiǎn)單的工作了，因?yàn)?2.0/3.0/4.0 的src目錄是基本一致的，所以照著原來(lái)的項(xiàng)目搬進(jìn)來(lái)就可以了

唯一需要注意的就是路徑的問(wèn)題了

結(jié)束語(yǔ)

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

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

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

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

最新評(píng)論