nginx中指定路径解析至不同vue项目

最新推荐文章于 2024-05-27 20:23:34 发布

陈龙辉Break

最新推荐文章于 2024-05-27 20:23:34 发布

阅读量1.6k

点赞数 1

分类专栏： Nginx Vue.js 技术开发文章标签： vue.js nginx 前端

本文链接：https://blog.csdn.net/weixin_44212165/article/details/127108877

版权

技术开发同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Vue.js

18 篇文章 1 订阅

订阅专栏

Nginx

4 篇文章 0 订阅

订阅专栏

在nginx中，指定路径解析至不同vue项目，需求如下：
比如访问 http://www.xxxxx.com 时，解析至pc项目;
如果访问 http://www.xxxxx.com/mc 时，解析至mc项目；

实现方案如下：
首先需要在mc的vue项目中修改vue.config.js配置文件，增加如下代码：

module.exports = {
	publicPath: '/mc/' #增加此行
}

配置完成并重新打包vue项目后，再修改Nginx配置如下：

server {
	location /mc {
    	alias /usr/share/nginx/mc/dist;
     	index index.html;
     	try_files $uri $uri/ /mc/index.html;
    }
    location /  {
	 	root /usr/share/nginx/pc/dist;
	 	#通过如下动态解析
		try_files $uri $uri/ @router;
	 	index index.html;
	}
	#通过如下动态解析
 	location @router {
    	rewrite ^.*$ /index.html last;
	}
}