1. 程式人生 > 其它 >如何執行一個vue專案

如何執行一個vue專案

  1. 第一,將專案裡面的“node_modules”這個資料夾刪除,這個是vue專案的依賴。

    (node_modules資料夾太大,我們一般不會將其和專案一起打包上傳到svn、git上的)
  2. 刪除package-lock.json。

   pachage-lock.json記錄了整個node_moudles資料夾的樹狀結構,還記錄了模組的下載地址,但是它是基於專案作者的npm版本庫生成的,若不刪掉這個依賴檔案,容易出現npm版本差異導致報錯。

 

 

3.    然後開啟cmd,cd到專案目錄。(具體操作:先輸入該碟符,然後再用cd命令切換目錄)

4.    輸入命令npm clean cache -f,清除npm快取,npm有快取時,常常出現安裝依賴不成功的現象,且一旦出現這個問題,報錯資訊很完善,但根據報錯資訊一項一項去解決,卻死活解決不了,還找不出原因。

5. 輸入命令npm install,重新安裝依賴。

6.    輸入命令npm run build 打包。

7. 最後輸入命令npm run dev/npm run serve(或者npm rum xxx)後項目成功執行。
這裡注意有可能不同,npm run dev是vue-cli2.0版本使用的,npm run serve 是vue-cli3.0版本使用的,npm run xxx 中的 xxx 可以理解為鍵值對的 key,實際上 run 的是在 package.json 裡面 scripts 配置的 value。

 vue cli2.0

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
}

vue cli3.0

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

參考文件:https://blog.csdn.net/weixin_39261165/article/details/118707536?utm_medium=distribute.pc_feed_404.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5.control404&depth_1-utm_source=distribute.pc_feed_404.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5.control40。