Vue 之 Nginx 部署

nginx 下載地址：http://nginx.org/en/download.html 下載后直接解壓，cmd 進入到解壓目錄運行 start nginx 即可啟動

 

 

 

常用命令：

　nginx -s stop   直接干掉服務

　start nginx     啟動服務

　nginx -s quit         優雅停止nginx，有連接時會等連接請求完成再殺死worker進程  

    nginx -s reload     優雅重啟，並重新載入配置文件nginx.conf

    nginx -s reopen     重新打開日志文件，一般用於切割日志

    nginx -v            查看版本  

    nginx -t            檢查nginx的配置文件

    nginx -h            查看幫助信息

    nginx -V       詳細版本信息，包括編譯參數 

    nginx  -c filename  指定配置文件

 

部署

1. vue配置

　　1. 修改項目 build 目錄下 utils.js 文件： 將 publicPath 修改為 publicPath:'.../../'   防止打包后找不到靜態文件的問題　　

　　　　

　　2. 修改項目 config 目錄下 index.js 文件：將 assetsPublicPath 改為： assetsPublicPath:'./' ,修改目的是為了解決js找不到的問題

　　　　

　　3. npm run build 打包

 

 

2. nginx配置（將 vue 打包好的  dist 文件丟到 nginx 的html 目錄下）

　　1.  打開 nginx目錄下的 conf \ nginx.conf 文件

　　2. 配置端口號與訪問地址：

　　　　在 server { ...... } 中配置  listen  與 server_name

　　　　

　　     將 location 中的 root 根路徑 文件修改為 vue 的dist目錄（將 vue的dist 放入到 nginx html文件中后，修改為：  root     html\dist;  即可）， index = vue中dist文件中的index.html文件（root 指向了  dist，寫作  index    index.html  index.html  即可）

　　　　

 

 

　　3. 解決vue在瀏覽器中輸入路由地址出現404的問題（重要）

 　　　在 server { ...... } 中插入如下代碼

......
server{
  ...... 
  # 解決vue在瀏覽器中輸入路由地址出現404的問題
  location / {
    root   html\dist;
    index  index.html index.htm;
    try_files $uri $uri/ @router; # 需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
  }
		
  location @router {
    rewrite ^.*$ /index.html last;
  }
  ......
}
......

　　4. 解決 axios 代理問題（重要）

　　　1> 將下圖中的代碼取消注釋（將前面的 ‘#’ 刪掉即可）

　　　　

 

 　　　2> 將 ~ \.php$ 修改為項目中的代理關鍵字，如下圖所示：

 　　　　 

　　　3> 將  proxy_pass   的值改為需要訪問的 服務器地址 即可