nginx单域名配置访问多vue项目(vue3 + vite4)

2023-12-22 19:28

本文主要是介绍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 {}
}

最终访问

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

这篇关于nginx单域名配置访问多vue项目(vue3 + vite4)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/525174

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Redis Cluster模式配置

《RedisCluster模式配置》:本文主要介绍RedisCluster模式配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录分片 一、分片的本质与核心价值二、分片实现方案对比 ‌三、分片算法详解1. ‌范围分片(顺序分片)‌2. ‌哈希分片3. ‌虚

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

Maven 配置中的 <mirror>绕过 HTTP 阻断机制的方法

《Maven配置中的<mirror>绕过HTTP阻断机制的方法》:本文主要介绍Maven配置中的<mirror>绕过HTTP阻断机制的方法,本文给大家分享问题原因及解决方案,感兴趣的朋友一... 目录一、问题场景:升级 Maven 后构建失败二、解决方案:通过 <mirror> 配置覆盖默认行为1. 配置示

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

Springboot3+将ID转为JSON字符串的详细配置方案

《Springboot3+将ID转为JSON字符串的详细配置方案》:本文主要介绍纯后端实现Long/BigIntegerID转为JSON字符串的详细配置方案,s基于SpringBoot3+和Spr... 目录1. 添加依赖2. 全局 Jackson 配置3. 精准控制(可选)4. OpenAPI (Spri

Windows的CMD窗口如何查看并杀死nginx进程

《Windows的CMD窗口如何查看并杀死nginx进程》:本文主要介绍Windows的CMD窗口如何查看并杀死nginx进程问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows的CMD窗口查看并杀死nginx进程开启nginx查看nginx进程停止nginx服务

maven私服配置全过程

《maven私服配置全过程》:本文主要介绍maven私服配置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录使用Nexus作为 公司maven私服maven 私服setttings配置maven项目 pom配置测试效果总结使用Nexus作为 公司maven私

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行