实现效果(举个例子):
访问 activity.com/ ：
原2023年活动移动端项目，不影响路由跳转，无页面刷新404问题；
访问 activity.com/2024/ ：
新2024年活动移动端项目，不影响路由跳转，无页面刷新404问题。
应用场景:
1.将管理后台和移动端项目部署在同一个域名下
2.将不同移动端项目部署在同一个域名下,可区分移动端版本,开发、测试环境等
（一）前端配置(vue3+vite)
1.修改路由配置文件，使用HTML5历史记录模式
// router/index.js
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory("/2024/"), // 注意前后都要有/
routes,
});
export default router;
2.修改vite配置文件
// vite.config.js
export default defineConfig({
build: {
chunkSizeWarningLimit: 1600, // 解决项目文件过大打包时的警告，可选
},
// base 可以配置静态资源的基础路径,可配置为外部存储地址,实现js,css等资源的分离 例 https://activity.com/activity-manage/dist
base: "/2024/", // 关键代码
});
//index.html 所有静态资源路径(只列举了一部分)
配置base为/2024/
<script type="module" crossorigin src="/2024/js/index-2eb17060.js"></script>
<link rel="modulepreload" crossorigin href="/2024/js/@vue-bb9a0bf5.js">
<link rel="modulepreload" crossorigin href="/2024/js/@babel-ec71a13c.js">
<link rel="modulepreload" crossorigin href="/2024/js/has-symbols-e8f3ca0e.js">
...
配置base为https://activity.com/activity-manage/dist
<script type="module" crossorigin src="https://activity.com/activity-manage/dist/js/index-f6819616.js"></script>
<link rel="modulepreload" crossorigin href="https://activity.com/activity-manage/dist/js/@vue-bb9a0bf5.js">
<link rel="modulepreload" crossorigin href="https://activity.com/activity-manage/dist/js/@babel-ec71a13c.js">
<link rel="modulepreload" crossorigin href="https://activity.com/activity-manage/dist/js/has-symbols-e8f3ca0e.js">
...
3.上传项目文件到服务器目录
- 原2023活动项目目录： /home/nginxWebUI/2023/
- 新2024活动项目目录： /home/nginxWebUI/2024/
（二）Nginx配置
location / {
root /home/nginxWebUI/2023/;
try_files $uri $uri/ /index.html;
}
location ^~/2024 {
alias /home/nginxWebUI/2024/;
try_files $uri $uri/ /2024/index.html;
}
注意
location 要写 ^~/2024 ，写 /2024 页面会一直空白，并报错找不到 assets 目录下的资源文件。
因为原2023项目的location是 / ， /2024 会匹配到原2023项目，且原项目中没有 /2024 这个路由，所以页面空白，即没有资源文件。
^~/2024 表示忽略其他location配置的URI，直接匹配 /2024 ，所以成功。
