vue3 vite nginx部署（多级路径）

nginx 部署vue3 vite打包内容

server {
       listen       8000;
       location / {
           root   D:/www/;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
       
       location /api/ { // 此处为接口代理
           proxy_pass https://xxx.xxxx.com/api/;
       }
}

nginx 部署多级路径

1. vue3: vue-router进行改造，需要加上前缀

const router = createRouter({
  history: createWebHistory('/j/'),
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: 'home',
          component: () => import('@/views/home/index.vue')
        },
        {
          path: ':id',
          component: () => import('@/views/j/index.vue')
        }
      ]
    }
  ]
})

2. vite: 配置base

base: '/j/', // 设置打包路径

3. nginx: 配置多路径

root为上级目录，定位是 root + /j/index.html

alias为当前index.html的目录，定位当前目录的index.html

location ^~/j {
   alias   D:/www/j/;
#    root    D:/www/;
   index  index.html index.htm;
   try_files $uri $uri/ /j/index.html;
}