NGINX + VUE | 多个项目映射同一端口 | 多端口、不同路径指向同一项目
Nginx 的配置文件是学习 Nginx 的必经之路,配置文件的父子级关系是:main context > http & event > server > location。官网的配置文件示例
多项目指向同一个端口
这是最常见的需求了,一般用 80 端口映射多个目录,根据不同的项目名字来划分访问的地址。
VUE 项目配置
- 找到并修改
config/index.js
这个文件,在配置的 build 中的assetsPublicPath
从/
修改为/<项目名>/
。
- 找到并修改
src/router.js
。1
2
3
4const router = new VueRouter({
base: "/<项目名>/", // 添加这句
routes
})
Nginx配置
找到并修改 Nginx 的配置文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15server {
listen 80;
server_name www.iweeek.com;
root /usr/local/webserver/nginx/html;
index index.html;
location /<项目名1>{
index index.html;
}
location /<项目名2> {
}
access_log on;
error_log on;
include server.conf;
}重启 Nginx ,使 Nginx 配置生效。
1
$ ./nginx -s reload
访问一下试试吧。
http://www.iweeek.com/项目名1
http://www.iweeek.com/项目名2
这两个访问的效果是一样的。
多端口、不同路径指向同一项目
这个需求是我在工作上碰到的,之前已经发布了带着端口的链接,上面领导看到了,认为这丫的端口哪能随便暴露出去呢,改!不过想想也是,见过哪个网站域名后面加上端口的?一般都是内部使用带端口,端口又是越用越少的(包括 1023 以内的都是公认端口,在 /etc/services 里面可以看到这种映射关系),既然一个端口能抵多个项目,我何乐而不为呢!端口的概念
VUE 项目配置
这个和多项目指向同一个端口一样,不用动。
Nginx配置
找到并修改 Nginx 配置文件。
1
2
3
4
5
6
7
8
9
10
11
12server {
listen 81;
server_name www.iweeek.com;
root /usr/local/webserver/nginx/html;
index index.html;
location / {
index /<项目名>/index.html;
}
access_log on;
error_log on;
include server.conf;
}访问一下吧。
http://www.iweeek.com/项目名
http://www.iweeek.com:81/
这两个访问的效果也是一样滴。