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

本文主要是介绍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中的文件夹也是bblocation / { ## 前端项目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 {}
}