如何使用Vite打包和部署项目到服务器二级路由

如果你想把你用Vite构建的项目部署到服务器的二级路由上，比如 http://demo.dev/admin/ ，你需要注意以下几个步骤

一. 配置基础路径base

基础路径base是指你的项目在服务器上的相对路径，比如你的项目部署在 http://demo.dev/admin/ 上，那么你的基础路径就是 /admin/ 。你需要在两个地方配置基础路径：

1. 配置vite.config.ts中的base属性。这个属性会影响你的静态资源的引用路径，比如图片，样式，脚本等。你可以在vite.config.ts中直接写死base的值，也可以通过环境变量来动态设置。
2. 配置路由的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/