windows下vue項目啓動步驟

作者：花郎徒結 
原文：https://blog.csdn.net/qq_27680317/article/details/71123051

前後端分離項目，要做前後端聯動測試，沒整過前端用vue, nodejs和webpack的開發管理方式。來回折騰終於把已經建好的vue項目啓動起來，做個筆記記錄下步驟備用，只針對沒有任何前端項目啓動經驗的，可能對別人沒有參考意義：

os：windows7

（1）git clone已建的vue項目（強迫症患者非要寫，廢話）

（2）裝好nodejs，最新版本6.10以上的好像都能自動配置路徑和npm啥的，反正裝好後在任意路徑下用cmd查"node --version"或者"npm -v"都能給出版本號，不用像一些其他教程一樣還要配置環境變量。個人偏好者另說。

（3）切換npm鏡像：在任意路徑下用cmd輸入“npm install -g cnpm --registry=https://registry.npm.taobao.org” 這樣就能用淘寶的npm鏡像代替國外的資源，懶得用代理同學的福音。以後就可以用cnpm命令來全部代替npm。不設置代理的話，在後續項目的npm install的時候，容易因爲超時而失敗。有教程把這條命令的“--registry”寫成只有一個“-”，注意是兩個“--”。

（4）npm全局安裝vue：仍舊在任意路徑的cmd下輸入“cnpm install vue-cli -g”，安裝vue。成功後輸入vue能出來信息。

（5）npm項目依賴組件安裝：cmd進入前端vue項目的根目錄，輸入命令“cnpm install”，會根據前端項目的依賴關係下載好相關的組件，存在項目目錄的node_modules文件夾下。一般git庫會gitignore依賴組件，也就是沒有node_modules文件夾，不然太大了... 這步容易發生err，遇見了就要打回去重弄，不要掩耳盜鈴，具體錯誤排查stackoverflow...。

（6）npm編譯：第一次運行前，要對項目進行編譯，cmd進入前端vue項目的根目錄，輸入命令“npm run build”，此時會對根目錄下的package.json對build命令的定義進行編譯，一般"build" = "webpack -p"。

（7）配置nginx：前後端分離項目一般都要解決跨域問題，上nginx吧，配好nginx安裝目錄/conf/nginx.conf的server模塊。nginx的配置不詳述。好像現在nodejs也能直接代理，但是如果用windows的同學，好像windows的nodejs不支持process.argv[...]，nginx歡迎你迴歸（話說nginx在windows下表現也不太穩定，經常好好地項目又不行了，此時不管三七二十一首先重啓nginx！）

（8）配置項目主機地址：前端項目裏需要有個config文件夾，裏面要有host.js或者config.js文件，定義nginx轉域後的主機地址+端口號（也就是nginx.conf裏面server模塊的server_name值+listen的端口號）。git項目拉下來沒有的話自己加一個，文件內容範例（下面用${}表示nginx.conf裏面server模塊對應的字段值）：

const host = 'http://${server_name}:${listen}/server/';

export {host};

（9）配置windows的HOSTS：由於是在本機上啓用前端項目，需要將127.0.0.1和nginx代理後的域名做對應。找到系統的HOSTS文件（win7系統下在C:\Windows\System32\drivers\etc裏面），增加一條“127.0.0.1 ${server_name}”。否則本地啓動前端項目後瀏覽器訪問nginx代理後的域名會發生dns錯誤。

（10）啓動nginx

（11）啓動項目：cmd進入前端vue項目的根目錄，輸入命令“npm run dev”，此時會用nodejs啓動這個前端的vue項目。大功告成。

一個比較典型的用webpack管理的vue項目應該有如下文件和文件夾：

config/：定義代理的域名

dist/: 整個前端項目用webpack打包後的目標存放文件夾，裏面一般有bundle.js文件

lib/: 開發時引用的一些依賴文件，最經典的就是jquery

node_modules/：上面介紹的用npm對項目依賴組件進行安裝時就放在這個文件夾裏。

src/：自己寫的源代碼

index.html：主頁入口文件

package.json和webpack.config.js：這兩個文件應該是組件依賴關係和管理打包的配置文件？不太懂，反正沒有是不能cnpm install、cnpm run build、cnpm run dev的。

第一次配置好後，以後啓動只用兩步：

（1）啓動nginx