Vue CLI 4

專案架構

• webpack 的 config 改在 vue.config.js 配置
  • 舊有 webpack 配置，於新版幾乎已經內建，並且選用最佳化的配置，僅部分需要依專案做調整
• 靜態資料移動至 public 目錄

---

維護相關

• vue-cli 有提供 inspect 指令

  • 可以去觀察 webpack 的最終配置
  • 可更容易去修改預設配置(透過內建的註解)

• vue-cli-service 指令提供一個 --mode 可以稍作不同模式下的模擬（不完全一致）

  • build, serve, or inspect 皆有

---

開發環境

lint 行為變動

• 時機由 HMR 更改為 git push 時檢查
  • 優點
    • 切換分支時，可降低 HMR 時間(appr. 25% off)
    • 保證(沒有特殊行為下) build 之前，lint 不會有 Error
  • 缺點
    • 無法實時知道目前有無 lint 錯誤
      • 可安裝 VSCode 的 extensions: eslint, stylelint 替代原本 HMR 提供的資訊
  • 個人稍用後，覺得 git push 時機比較 ok
    • git commit 會拖延專案開發速度，尤其在 rebase / cherry-pick 等整理節點時

指令變動

• yarn run dev => serve

• yarn run devEnv => devenv

• yarn run lint, lint:js, lint:css

  • 增加 stylelint 檢測
  • 拆分 lint:js 與 lint:css
  • 不搭載 auto fix 相關配置
    • 因為這些配置更改檔案前，不會檢查目前 git 工作目錄 的狀態，若目前有資料尚未 commit ，則 lint 後，無法分辨哪些是 lint 哪些是 change

---

特殊狀況

• 如遇到問題可清除 node_modules/.cache 後，再次嘗試