RY使用笔记

Vue前端部署策略：多级域名配置与路由管理,

最新推荐文章于 2025-12-04 09:49:16 发布

原创最新推荐文章于 2025-12-04 09:49:16 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

本文介绍了如何在Vue项目中实现多级域名的部署，涉及vite.config.js中的base设置，使用createWebHistory进行动态路由配置，以及nginx.conf中的路径映射。还展示了注销功能的实现，确保前端与后端协调一致。

1.vue前端多级域名部署

1.vite.config.js
base: VITE_APP_ENV === 'production' ? '/xx1/xx2/' : '/xx1/xx2/',
2.src/router/index.js
history: createWebHistory('/xx1/xx2'),
3.src/layout/components/Navbar.vue
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    ...
    location.href = "/xx1/xx2/index";
}
4.nginx.conf
location / {
    root   /usr/share/nginx/html;
    try_files $uri $uri/ /xx1/xx2/index.html;
    index  index.html index.htm;
}