同一台服务器部署多个项目，需要使用目录前缀区分不同目录，因此请求的静态资源例如 /assets/xxx 和 /images/xxx 需要变成 /projectName/assets/xxx 和 /projectName/images/xxx，通过 base 参数添加指定前缀

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/projectName/' : '/',
  build: {
    outDir: 'projectName'
  }
})

在访问项目时，路径应该是 https://www.example.com/projectName/path，因此需要修改 history 配置，从而避免页面 404 问题

const router = createRouter({
  history: createWebHistory(
    import.meta.env.VITE_ENV === 'production' ? '/projectName/' : '/'
  ),
  routes: []
})

需要注意的是，配置了指定的 history 后，虽然此时的路径是以 /projectName/ 开头，但是 useRoute() 中的任何值都不会包含 /projectName/，只有 window.location 这些变量中会包含 /projectName/，所以在处理根路径跳转时不要根据 /projectName/ 来区分开发和生产环境，因为根路径始终是 /，下面是正确处理方法

router.beforeEach(({ path }, _, next) => {
  if (path === '/') {
    location.href =
      import.meta.env.VITE_ENV === 'production'
        ? '/projectName/path'
        : '/path'
    return
  }

  next()
})

多项目部署时，404 页面中返回首页的按钮如果是 a 标签，那么路径也需要根据环境决定

<template>
<a :href="path">返回首页</a>
</template>

<script lang="ts" setup>
const path = import.meta.env.VITE_ENV === 'production' ? '/projectName/' : '/'
</script>

如果是通过路由跳转返回首页，那么直接跳转到 / 即可，路由守卫中会根据环境进行跳转

<template>
<div @click="onClick">返回首页</a>
</template>

<script lang="ts" setup>
const onClick = () => {
  router.replace('/')
}
</script>