環境情況
- vue-cli 4.X
- nginx 1.21.X
- system: macos
一個域名、多個項目
域名/地址：www.yourDomain.com
項目 A：projectA（最終打包出來的文件夾名稱）
項目 B：projectB（最終打包出來的文件夾名稱）
想要最終的訪問方式：
默認 vue-router 會配置如下：
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL, // process.env.BASE_URL 指向的地址可以在 vue.config.js 中的 publicPath 配置，老的版本是 baseUrl
routes,
});
export default router;
再來看一下 vue.config.js 的配置
// projectA
module.exports = {
publicPath: "/projectA", //
outputDir: "projectA",
// ...
};
// projectB
module.exports = {
publicPath: "/projectB", //
outputDir: "projectB",
// ...
};
接着來配置 nginx
location /projectA {
index index.html index.htm;
try_files $uri $uri/ /projectA/index.html;
}
location /projectB {
index index.html index.htm;
try_files $uri $uri/ /projectB/index.html;
}
保存配置，重啓 nginx 或者重新加載 nginx 配置
$ nginx restart
# or
$ nginx -s reload
一個域名、一個項目
域名/地址：www.yourDomain.com
項目：project（最終打包出來的文件夾名稱）
首先 vue-router 的文件不用動，去修改 vue.config.js 的 publicPath
module.exports = {
publicPath: "/", //
outputDir: "project",
// ...
};
nginx 中配置
location / {
root /usr/local/var/www; # 項目在服務器上的真實路徑
index index.html index.htm;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.*)$ /index.html last;
}