Nginx html子目录部署Vue-Cli History脱坑记录（二）

前几天更新了Nginx部署Vue-Cli History脱坑记录（一）（本来没有一的，但是打脸来的太快，来不及反应）

因为前端的项目多，想在一台云服务器上部署，但是每次去安全组加端口也怪麻烦的，最主要的是开那么多端口不安全。那么如何通过Nginx的一个端口来代理多个项目就是本次要探索的课题。上一篇博文主要是把项目部署在html根目录的，这次要部署多个项目肯定得按文件夹区分了。

因此，配置方面肯定会有不同。

1、配置 base 路径，之后的页面访问都是基于 base 路径

router = new VueRouter({ 
	base: '/infos/', 
	mode: 'history', 
	routes
})

2、配置文件路径（Nginx/html/路径下的子目录）

module.exports = { 
	......
	publicPath: '/infos/'
	......
}

3、 配置 Nginx

location /infos {
	root '/nginx-1.18.0/html/infos'; 
	index index.html index.htm;
	try_files $uri $uri/ @router;
	add_header Cache-Control no-cache;
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Credentials *; add_header Access-Control-Allow-Methods *;
	add_header Access-Control-Allow-Headers *;
}
location @router{
	rewrite ^.*$ /infos/index.html last;
}

跟上一篇比，主要是rewrite里多加了一级路径

---

至此，我的项目发布没有问题了。祝前来寻找答案的你，项目上线顺利，加油！