原網址 https://www.cnblogs.com/mjbrian/p/9329218.html

原創：https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1

 不是ngnix服務器是，忽略7~10；

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

 

os：windows7

 

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

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

（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：下載地址 http://nginx.org/en/download.html  前后端分離項目一般都要解決跨域問題，上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

（2）進入前端項目根目錄，cmd運行npm run dev