【項目上線】詳細步驟05：實戰 --- vue項目上線步驟

這裏我以yunfenghui商城爲例

https://github.com/lolongwell...

第一步，在虛擬主機上添加一個站點，如yunfenghui.lolong.xyz

lnmp vhost add

而後，一路敲回車。（注意須要在雲主機上解析域名，詳細步驟參考【項目上線】04）

第二步，經過git把項目克隆到對應位置，此例克隆到/home/wwwroot/yunfenghui.lolong.xyz目錄下

cd /home/wwwroot/yunfenghui.lolong.xyz

git clone https://github.com/lolongwell/YunFengHuiShop.git

第三步，經過npm或者cnpm安裝對應依賴包

國內主機建議配置cnpm，安裝速度更快

npm i -g cnpm --registry=https://registry.npm.taobao.org

安裝api（後臺）依賴包node_modules

cd /home/wwwroot/yunfenghui.lolong.xyz/YunFengHuiShop/api

cnpm i

安裝client（前臺）依賴包node_modules

cd /home/wwwroot/yunfenghui.lolong.xyz/YunFengHuiShop/client

cnpm i

第四步，MongoDB導入數據，將/YunFengHuiShop/resource文件中的dumall-users和dumall-goods數據導入數據庫

cd /home/wwwroot/yunfenghui.lolong.xyz/YunFengHuiShop

mongoimport -d=shop -c=users ./resource/dumall-users

mongoimport -d=shop -c=goods ./resource/dumall-goods

第五步，上線前，將文件打包到dist目錄

cd /home/wwwroot/yunfenghui.lolong.xyz/YunFengHuiShop/client

npm run build

第六步，配置Nginx環境，修改root路徑，修改代理配置

此處，須要瞭解vue項目開發的跨域問題，詳細文章參考https://segmentfault.com/a/11...

vim /usr/local/nginx/conf/vhost/yunfenghui.lolong.xyz.conf

修改完成後，輸入 :wq 保存並退出，而後重啓Nginx服務

/etc/init.d/nginx restart

最後，瀏覽器訪問yunfenghui.lolong.xyz。