方法1：vue 路由沒(méi)有使用history模式且vue項(xiàng)目打包上傳直接放在Nginx的html文件夾中，通過(guò)以下配置訪問(wèn)html文件夾下的index.html文件即為項(xiàng)目首頁(yè)
- build文件下的
untils.js文件中找到vue-style-loader增加publicPath: '../../'
- config文件下的
index.js文件找到build屬性，修改assetsPublicPath: '/'為assetsPublicPath: './'
- 設(shè)置開(kāi)發(fā)接口代理，這里的代理正是為 Nginx 配置做準(zhǔn)備的
- 生產(chǎn)環(huán)境配置文件中配置訪問(wèn)的服務(wù)器域名，注意：因?yàn)榍岸隧?xiàng)目運(yùn)行訪問(wèn)socket時(shí)會(huì)默認(rèn)帶上
/socket.io/這個(gè)路由，所以初始化Socket客戶端鏈接時(shí)的url為服務(wù)器域名即可！
- 使用
npm run build命令打包項(xiàng)目后將（static文件夾+index.html文件）上傳到/usr/local/nginx/html/目錄下，再配置nginx.conf配置文件，最后重啟Nginx服務(wù)即可！
方法二：vue路由使用history模式，則需要按照以下步驟來(lái)操作
- 現(xiàn)有一個(gè)需求，如何用Nginx配置訪問(wèn)不同的前端項(xiàng)目？答：①配置多個(gè)二級(jí)域名并且設(shè)置https訪問(wèn)對(duì)應(yīng)項(xiàng)目根路徑的index.html文件即可；②基于Nginx的location進(jìn)行配置（以下步驟使用這種方法）。
- 在方法一的基礎(chǔ)上，修改
config文件夾下的index.js文件（注意是build內(nèi)）：
- 修改
src/router/index.js文件，添加內(nèi)容：base: '/frontend/',
-
然后執(zhí)行命令：
npm run build，確保產(chǎn)生的index.html文件中靜態(tài)資源路徑都是在/frontend/文件夾下的，注意添加內(nèi)容：<meta base=/frontend/>。
將打包后的文件上傳到Nginx的html目錄下，注意：
frontend文件夾下含static文件夾和index.html文件。
- 修改
nginx.conf文件：
- 以上 nginx 配置文件仍有缺陷，若手動(dòng)刷新會(huì)導(dǎo)致頁(yè)面404，故需修改一下請(qǐng)求根路徑下的
/代碼，讓其重定向到特定路由：
location / {
root html;
index index.html;
try_files $uri $uri/ /frontend/index.html; #@qwe
}
#location @qwe {
# if ($request_uri ~* "^/frontend/.*") {
# rewrite ^(.*)$ https://xxxxxxx/frontend last;
#}
#if ($request_uri ~* "^/backend/.*") {
# rewrite ^(.*)$ https://xxxxxxx/backend last;
#}
#}
#xxxxxxx：表示域名
#^(.*)$表示匹配的路由
#https://xxxxxxx/frontend：表示重定向的路由
#last：表示本條規(guī)則匹配完成后，繼續(xù)向下匹配新的location URI規(guī)則，同個(gè)代碼塊直接break
#~*：用于表示URI包含正則表達(dá)式，且不區(qū)分大小寫(xiě)
#$request_uri：表示除去$host剩下的部分
- 訪問(wèn)該項(xiàng)目：
個(gè)人域名/frontend。 - 新增Nginx訪問(wèn)不同前端項(xiàng)目都可以采用方法二進(jìn)行處理！
