Vue.js 3 项目 Vite 构建，部署到服务器二级目录

公司最近有个项目是使用 Vue.js 3 开发的前端工程，在历经一个月的开发之后，终于需要上线了。但是项目要求使用二级目录来部署，所以记录一下。

配置 Nginx

这一步即使是根目录部署也是必要的，否则页面会出页面空白的情况。只是部署的时候需要去掉 二级目录 的部分。

location /二级目录 {
  index index.html;
  try_files  $uri $uri/ @router;          
}

location @router {
  rewrite ^.*$ /二级目录/index.html last;
}

配置项目路由

在 vue-router 路由文件中，添加二级目录即可。

const router = createRouter({
  history: createWebHistory('/二级目录/'),
  routes,
})

配置 vite.config.js 文件

注意 base 配置项目，在对象的最外层，有些文章说是写在 server 配置中是不对。

export default defineConfig({
  base: '/二级目录/',
})