windows下vue項目啟動步驟


原創: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:前后端分離項目一般都要解決跨域問題,上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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM