nginx单域名配置访问多vue项目（vue3 + vite4）

。。。简单粗暴。。。

vue配置

项目a

vite.config.ts

// https://vitejs.dev/config/
export default ({
    command, mode }: ConfigEnv): UserConfig => {
   
  return {
   
    // 重要: 配置别名
    base: '/a/',
	// 其他配置
  }
}

router/index.ts

// 创建路由实例
const router = createRouter({
   
  // createWebHashHistory URL带#，createWebHistory URL不带#
  // 重要: 配置别名
  history: createWebHistory('/a/'), 
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({
    left: 0, top: 0 })
})

项目b

vite.config.ts

// https://vitejs.dev/config/
export default ({
    command, mode }: ConfigEnv): UserConfig => {
   
  return {
   
    // 重要: 配置别名
    base: '/b/',
	// 其他配置
  }
}

router/index.ts

// 创建路由实例
const router = createRouter({
   
  // createWebHashHistory URL带#，createWebHistory URL不带#
  // 重要: 配置别名
  history: createWebHistory('/b/'), 
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({
    left: 0, top: 0 })
})

然后项目打包

。。。。。。

nginx配置

html接口

html/a
html/b

conf配置

server {
   
        listen       8090;
        listen       [::]:8090;
        server_name  www.abc.com;
        charset utf-8;

        # 访问 xx.xx.xx.com/bb, bb=vue项目的别名, nginx中的文件夹也是bb

        location / {
    ## 前端项目
                root   /usr/local/nginx/html;
                index  index.html index.htm;
        }

        location ^~/a/ {
   
                alias  /usr/local/nginx/html/a/;
                index  index.html index.htm;
                try_files $uri $uri/ /a/index.html;
        }

        location ^~/b/ {
   
                alias  /usr/local/nginx/html/b/;
                index  index.html index.htm;
                try_files $uri $uri/ /b/index.html;
        }

        error_page 404 /404.html;

        location = /40x.html {
   

        }

        error_page 500 502 503 504 /50x.html;

        location = /50x.html {
   

        }
}

最终访问

http://www.abc.com:8090/a
http://www.abc.com:8090/b