在nginx 伺服器部署vue專案

以人人快速開發的開源專案：renren-fast-vue 為例

注：這裡開始認為各位都會使用nginx 

npm run build

可以正常執行

編譯報錯請移步到：[email protected] 專案編譯報錯: build `gulp`

接下來將renren-fast-vue 專案生成的dist 目錄修改為：renren-fast-vue 並壓縮為：renren-fast-vue.zip

複製renren-fast-vue.zip 到伺服器

解壓到：/usr/local/nginx/

vue專案的nginx配置檔案不直接在nginx.conf中進行配置，將配置儲存在/usr/local/nginx/conf/vhost/renren-fast-vue.conf

配置內容為：vi /usr/local/nginx/conf/vhost/renren-fast-vue.conf

server 

# 由於路由的資源不一定是真實的路徑，無法找到具體檔案
# 所以需要將請求重寫到 index.html 中，然後交給真正的 vue 路由處理請求資源
location @router 
}

vi /usr/local/nginx/conf/nginx.conf

在nginx.conf中http塊匯入檔案的指令
include ./vhost/renren-fast-vue.conf

檢查語法：nginx -t

啟動：nginx
重啟：nginx -s reload
停止：nginx -s stop

檢查nginx 監聽的埠是否啟動成功：netstat -anp|grep nginx

測試renren-fast-vue的首頁是否可以訪問：curl -i http://
到目前為止vue專案部署成功了，接下來通過瀏覽器，用網域名稱訪問
網域名稱為：server_name www.renrenfastvue.com;
在windows 的 c:\windows\system32\drivers\etc\hosts 檔案配置dns 網域名稱解析
登入的預設賬號密碼是：admin
ps：如果監聽埠為80，則不需要在網域名稱後面新增埠
歡迎收藏點讚
 
在nginx伺服器部署vue專案
1.加入.env.dev和.env.prod環境資訊 伺服器ip 2.request.js加入 import axios from axios import vue from vue const request function query catch err const post function...
Nginx伺服器部署
採用nginx原始碼安裝方式 1.將nginx 1.8.0.tar.gz上傳到 usr local 目錄下 tar zxvf nginx 1.8.0.tar.gz2.進入根目錄執行編譯檢查依賴環境是否滿足.configure cd usr local nginx 1.8.0 configure由於n...
vue專案部署到nginx伺服器
vue cli3 首先在專案根目錄建立乙個vue.config.js檔案 新增如下內容 module.export 然後 npm run build將vue打包後的dist資料夾放在nginx下的html資料夾即可。訪問 即可看到內容。注意 也可將dist資料夾改名為projectname，訪問 如...