nginx服务器同域名配置多个vue项目踩坑点-小祥驿站

简介新开了一个项目vue2的脚手架，使用常规配置的域名访问没问题，但是通过nginx配置在同一个域名下开了一个/test的路径来访问，打包上传后发现访问不了，出现空白页面，部署到线上后，刷新页面显示404，通过调试发现几个问题点以及解决办法。

本地启动/部署到线上后，切换路由，资源路径不正确导致页面空白。
配置打包路径(2.x项目是assetsPublicPath，而3.x项目是publicPath)。

项目配置

vue2 vue.config.js指定目录

module.exports = defineConfig({
  publicPath: "test",//指定项目目录
  ...
})

router/index.js

const router = new Router({
  base: "test", //指定项目目录
  mode: "history", // 去掉#，需要路由模式改为history
  routes: routes,
});

vue3 vite.config.ts

export default defineConfig(({ command, mode }): UserConfig => {
  const isBuild = command == 'build'
  const root = process.cwd()
  const env = parseEnv(loadEnv(mode, root))

  return {
    base: "/test/", // 关键代码,指定项目目录
    // plugins: [vue(),],
    plugins: setupPlugins(isBuild, env),
    }
})

router/index.ts

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...],
})

nginx服务端配置

当使用HTML5 History模式时，前端路由的URL（例如，/project/test）在刷新页面时可能会被解析为服务器上的路径，而不是在前端路由中。这可能导致Nginx服务器返回404，因为实际上没有对应的文件路径。
当使用HTML5 History模式时，前端路由的URL（例如，/project/test）在刷新页面时可能会被解析为服务器上的路径，而不是在前端路由中。这可能导致Nginx服务器返回404，因为实际上没有对应的文件路径。
为了解决这个问题，你需要在Nginx配置中使用try_files来重定向请求到入口HTML文件

try_files这行是关键，$uri为变量，代表你访问的地址。意思大概是，如果访问test/文件夹下面的某个文件，找不到时就返回/test/下面的index.html文件。

location /test {
    alias /www/test/dist;
    index index.html;
    try_files $uri $uri/ /test/index.html; #指定
    gzip on;  #启用压缩
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}

以上配置完成即可正常访问，刷新页面也可访问