Vue3+Vite+history模式+Nginx 部署二级路径 | ツール

需求是vite打包的项目部署到指定的二级路径。

例如把前端项目部署在https

.com/bar/上，可以通过https

.com/bar/打开前端项目网页。

关键点在于三点：

1. vite.config.ts 中的 base

# vite.config.ts 中的 defineConfig 方法

base: '/bar/'

2. router 中的 createRouter

const router = createRouter({
  history: createWebHistory('/bar/'), // 直接写死/bar/，这里可以用环境变量import.meta.env.BASE_URL或者自己设置别的环境变量
})

3. 配置 nginx

location /bar {
    index index.html;
    alias /usr/share/nginx/dist/bar; # 二级路由用alias，放在服务器上的项目路径
    try_files $uri $uri/ /bar/index.html; # 核心就是try_files，会在这几个地方都试一下，如果不配置会404

}

至于配置环境变量什么的花活就看自己项目需求了。