如何使用Vite打包和部署项目到服务器二级路由
如果你想把你用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打包和部署项目到服务器二级路由 - 初心
