本文解決:
- vue打包項目部署設置子路徑訪問;
- nginx部署多個子項目;
- 一個ip/域名 端口 配置多個子項目;
- 配置后,項目能訪問,但是刷新頁面就丟失的問題
注:本文需要nginx配置基礎。基礎不牢的可見文章:Nginx配置大全【六大使用場景、七大負載均衡策略、四大負載健康檢查】
一、在根目錄下的vue.config.js
文件下,設置
// vue.config.js 配置說明
// 官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions
module.exports = {// 部署生產環境和開發環境下的URL。// 默認情況下,Vue CLI 會假設你的應用是被部署在一個域名的根路徑上// 如果應用被部署在一個子路徑上,你就需要用這個選項指定這個子路徑。例如,如果你的應用被部署 https://www.xxx.vip/admin/,則設置 publicPath 為 /admin/。publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/",
}// process.env.NODE_ENV 檢測當前的運行環境:開發(production)或生產(development)
// 如果開發和生產環境路徑都一樣,則直接: publicPath:"production"
二、在路由文件下配置(位置和文件名不固定,可以是src/router.js
,也可以是src/router/index.js
)
//路由與組件引入
import Vue from 'vue'
import Router from 'vue-router'//創建路由對象
Vue.use(Router)export default new Router({// 根據開發環境,設置拼接路由base: process.env.NODE_ENV === "production" ? "/admin/" : "/",//其他配置項
})
三、打包項目( 默認打包路徑是項目根目錄下的dist )
四、配置nginx
不會nginx基礎配置的,請移步文章《Nginx配置大全【六大使用場景、七大負載均衡策略、四大負載健康檢查】》
# 配置訪問子路徑,(避免和文件路徑定義沖突,下面采用子路由的說法)location /admin/ {# 指定前端應用的根目錄,子路由訪問,不能再使用root,需要使用aliasalias D:/打包的dist路徑/dist/;# 嘗試匹配文件,如果找不到則重定向到 /子路由/index.html# 如果不加前面的路徑,則會出現,頁面能訪問,但是不能刷新,一刷新就沒的情況。try_files $uri $uri/ /admin/index.html# 指定默認的索引文件index index.html index.htm;}
注意點(上面配置代碼,每個注釋都看一下,避免一些bug):
五、如果需要配置多個項目,則重復以上操作。
常見問題bug:
1、nginx配置子路徑的時候,缺失斜桿 /
2、指定根目錄的時候,沒有采用alias
,而是采用了root
。(兩者區別下面會解析)
3、根目錄后面,缺失斜桿 /
4、項目可以訪問,但是不能刷新! 一刷新頁面就沒了:重定向沒有加子路由路徑try_files $uri $uri/ /子路由路徑/index.html
擴展:root 和 alias 的區別
1、root指令:
root指令用于定義與請求URI的根目錄關聯的路徑。
它會將請求URI中的斜杠后面的路徑添加到指定的根目錄后面。location /static/ {root /var/www/;
}
如果請求的URI是/static/css/style.css,
那么Nginx會在/var/www/static/css/style.css路徑下查找相應的文件。
2、alias指令:
alias指令用于將請求URI的一部分映射到文件系統中的另一個路徑。
它會將請求URI中匹配location的部分替換為指定的路徑。location /static/ {alias /var/www/;
}
如果請求的URI是/static/css/style.css,
那么Nginx會在/var/www/css/style.css路徑下查找相應的文件。
主要區別在于:
路徑處理方式:root指令將請求URI直接附加到根目錄,而alias指令會替換location匹配的部分。
路徑結尾斜杠處理:root指令會自動添加斜杠,而alias指令需要在路徑末尾手動添加斜杠以確保正確的路徑映射。