如果你想把你用Vite构建的项目部署到服务器的二级路由上，比如 http://demo.dev/admin/ ，你需要注意以下几个步骤：
一. 配置基础路径base
基础路径base是指你的项目在服务器上的相对路径，比如你的项目部署在 http://demo.dev/admin/ 上，那么你的基础路径就是 /admin/ 。你需要在两个地方配置基础路径：
- 配置 vite.config.ts 中的 base 属性。这个属性会影响你的静态资源的引用路径，比如图片，样式，脚本等。你可以在 vite.config.ts 中直接写死 base 的值，也可以通过环境变量来动态设置。
- 配置路由的 history 模式。这个模式会影响你的路由路径，比如你访问 http://demo.dev/admin/login ，那么你需要在路由中指定基础路径为 /admin/ ，否则会出现 404 错误。你可以在 router/index.ts 中使用 import.meta.env.BASE_URL 来获取vite.config.ts 中 设置的 base 值。
通过环境变量配置基础路径
分别在production和development模式下的环境变量中添加基础路径变量，生产环境：.env.production文件，开发环境：.env.development文件
#生产环境VITE_BASE_PATH=/admin/##开发环境VITE_BASE_PATH='/'vite.config.ts
在配置中添加：
# 函数式写法export default ({ mode }: ConfigEnv): UserConfig => { // 获取 .env 环境配置文件 const env = loadEnv(mode, process.cwd()); return { base: env.VITE_BASE_PATH, ... }}# 或import dotenv from 'dotenv';dotenv.config({ path: `.env.${process.env.NODE_ENV}` });export default defineConfig({ base: process.env.VITE_BASE_PATH,})router/index.ts
const router = createRouter({ history: createWebHistory(import.meta.env.VITE_BASE_PATH), routes})package.json
"scripts": { "dev": "NODE_ENV=development vite", "preview": "vite preview", "build": "vite build",}# 函数式配置vite.config.ts# "scripts": {# "dev": "vite serve --mode development",# "build:prod": "vue-tsc --noEmit && vite build --mode production"# }打包：
npm run build二. nginx配置及部署
nginx是一个高性能的HTTP和反向代理服务器，可以用来部署你的Vite项目。你需要在nginx的配置文件中添加以下内容：
server { listen 80; server_name demo.dev; location /admin { #二级路由时需要使用别名alias，不用root alias html/dist/; index index.html; #若不配置try_files，刷新会404 try_files $uri $uri/ /admin/index.html; } #后台接口 location /api/ { proxy_pass http://api.demo.dev/; }}这里解释一下几个关键的配置项：
- listen：指定监听的端口号，这里是80，你可以根据你的实际情况修改。
- server_name：指定服务器的域名，这里是demo.dev，也可以修改为你的域名。
- location /admin：指定二级路由的路径，这里是/admin，要和你的项目基础路径保持一致。
- alias html/dist/：指定二级路由对应的项目目录，这里是html/dist/，也就是你打包后生成的dist文件夹，要放在nginx的html目录下。
try_files $uri $uri/ /web/index.html：指定当请求的资源不存在时，重定向到/admin/index.html，这样可以避免刷新页面时出现404错误。- location /api/：指定后台接口的路径，这里是/api/，要和你的项目中请求后台接口的路径保持一致。
- proxy_pass http://api.demo.dev/：指定后台接口对应的真实地址，这里是http://api.demo.dev/，要根据你的实际情况修改。
配置好nginx后，重启nginx服务，然后就可以在浏览器中访问
http://demo.dev/admin/
查看你的项目了。
Vite基础路径指令配置原理
在vite当中，官方提供了一些内置环境变量，其中就包括 BASE_URL，该值默认为 /，在项目文件中，必须通过 import.meta.env.xxx 的方式调用环境变量，此处为 import.meta.env.BASE_URL，之后，vite会将 import.meta.env.BASE_URL 替换为内置的BASE_URL的值，并可以通过指令：--base 设置BASE_URL的值
使用npm运行脚本时可以传递参数，在package.json中添加指令：
demo: vite build --mode production运行npm run demo时等同于vite build --mode production
运行npm run demo -- --base /admin/时等同于vite build --mode production --base /admin/
但是-- --有两个--，使用起来不太方便，于是改进一下指令：
demo: vite build --mode production --base运行npm run demo --base /admin/时等同于vite build --mode production --base /admin/
转载：如何使用Vite打包和部署项目到服务器二级路由 - 初心
