nginx部署多个vue项目的方法示例

2023-07-17 03:34:04 78

上一篇已经介绍了然后配置web项目；今天由于公司需求，需要在同一域名端口下，部署两个项目；今天花了一上午终于弄好了，选择赶紧做一个笔记。

如何连接阿里云服务器就不在这里说了，请看我以前的文章。

首先需要的效果

http://47.97.244.83/login
http://47.97.244.83/student/login

文件目录

两个项目并列在同一文件夹内。

准备好两个vue的项目

http://47.97.244.83/login：这个不用修改配置直接build就可以。关键是二级域名的vue项目，需要进行一下修改。

首先在config文件夹内的index.js内修改(注意是build内)

//nginx配置
assetsPublicPath:'/student/',

这样确保生产出来的文件，在index.html中都是在student下。

index.html文件修改

添加

最后build的index.html文件如下：




	
	
	
	
	砺行教育管理系统

在src/router/index.js文件修改
添加base:‘/student/',

Nginx配置修改

server{
listen80;
server_namelocalhost;
		#root/usr/local/sixiucheng/codes;
location/{
root/usr/local/sixiucheng/codes/dist;

	try_files$uri$uri/@router;
indexindex.htmlindex.htm;
}

		location/student{
		alias/usr/local/sixiucheng/codes/student/;
	try_files$uri$uri//student/index.html;
indexindex.htmlindex.htm;
}
location@router{
rewrite^.*$/index.htmllast;
}
error_page500502503504/50x.html;
location=/50x.html{
roothtml;
}
}

注意这里的root

一个是全局的一个单个引入，这里需要注意一下当注释掉全局的root时候，需要在二级配置下将root改为alias；如下图

所以此时的配置为

最后一定要注意重启！！！

nginx-sreload

注意：如果80端口失败

1.检查下nginx配置，使用nginx-t看看有无错误信息
2.检查本地防火墙是否开启80
3.如果是云主机，检查安全组是否开放80权限。

题外话

01…刚开始将alias写成root,导致html页面中的css和js一直404；后来百度到加下面一句话，就可以解决问题；但是这样会将所有的js，css引入的位置修改。这里注意一下。

#解决css，js引入失败
		location~.*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$
				{
					root/usr/local/sixiucheng/codes;
					proxy_temp_path/usr/local/sixiucheng/codes;
				}

02…网上还有alias的路径指向，root和alias的区别在于（个人理解，出错希望点出）：

location/file/{
alias/var/html/file;#这个查找文件的路径直接是/var/html/file
}
location/file/{
root/var/html/file;#这个查找文件的路径应该是/var/html/file/file
}

到此这篇关于nginx部署多个vue项目的方法示例的文章就介绍到这了,更多相关nginx部署多个vue项目内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

nginx部署多个vue项目的方法示例

热门推荐

随机推荐