vue項目啟動


(1)裝好nodejs,最新版本6.10以上的好像都能自動配置路徑和npm啥的,反正裝好后在任意路徑下用cmd查"node --version"或者"npm -v"都能給出版本號,不用像一些其他教程一樣還要配置環境變量。

(2)切換npm鏡像:在任意路徑下用cmd輸入“npm install -g cnpm --registry=https://registry.npm.taobao.org” 這樣就能用淘寶的npm鏡像代替國外的資源。

(4)npm全局安裝vue:仍舊在任意路徑的cmd下輸入“cnpm install vue-cli -g”,安裝vue。成功后輸入vue能出來信息。

(5)npm項目依賴組件安裝:cmd進入前端vue項目的根目錄,輸入命令“cnpm install”,會根據前端項目的依賴關系下載好相關的組件,存在項目目錄的node_modules文件夾下。

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

(7)配置nginx:前后端分離項目一般都要解決跨域問題,上nginx吧,配好nginx安裝目錄/conf/nginx.conf的server模塊。

(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項目。大功告成。


免責聲明!

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



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