安裝乾淨VUE開發環境 - daniel-qa/Vue GitHub Wiki
安裝乾淨VUE開發環境
1 . 移除全域的 vue-cli, vue/cli-service
npm list -g @vue/cli-service
npm uninstall -g @vue/cli-service
npm list -g @vue/cli-service
npm uninstall -g @vue/cli-service
PS. 移除全域 CLI 的好處是避免「全域版本」和「專案本地版本」不一致,導致 npm run serve、npm run build 時跑錯版。
2 .在專案資料夾內刪除舊有的依賴與鎖檔
rm -rf node_modules
rm package-lock.json
3 確保 @vue/cli-service 在專案裡
檢查:
npm list @vue/cli-service
沒有,則補裝,(一定要加 -D,讓它放到 devDependencies):
npm install -D @vue/cli-service
這個指令會:
幫你加一條 @vue/cli-service 到 package.json 的 devDependencies
自動建立新的 node_modules/ 和 package-lock.json
把所有在 package.json 裡列出來的依賴 一次裝好
✅ 好處是:一次搞定,加完就可以跑 npm run serve 或 build。
3 重新拉乾淨的依賴
刪完上述兩個東西後,直接執行:
npm install
這一步會重新產生新的 node_modules 和 package-lock.json,確保所有套件都是從官方註冊表 freshly install,沒有殘留。
npm list --depth=0
如果你看得到你該有的套件都在,那就不用再 npm install。
4 測試一下開發&打包
1 跑開發伺服器:
npm run serve
如果看到「Compiled successfully」或「App running at: …」就沒問題。
若出錯,通常會提示缺少哪個套件或版本錯誤,依照錯誤再手動補。
- 執行 npm run lint 可以幫你找出是哪一行或哪一個檔案有問題:
/Users/yourname/project/src/view/participation/index.vue
10:5 error Unexpected token ...
2 跑打包指令:
npm run build
確認能順利打包進 dist/,看到「Build complete」就表示環境乾淨、可以正常編譯。