关于nginx同域名同端口布置多个history模式的VUE项目带http
时间: 2024-10-11 15:15:46 浏览: 33
nginx部署多个vue项目的方法示例
在Nginx中,同一域名下部署多个Vue项目的常见场景是通过路径别名(path alias)配合history模式来实现。当你需要在同一域名(`example.com`)和同一端口(`80`或`443`)上运行两个或更多的Vue应用,可以这样做:
1. **配置Nginx**:
在Nginx服务器的配置文件中,为每个Vue应用创建一个新的location块,并指定对应的目录。例如,如果你有两个应用分别对应`/app1`和`/app2`,你可以这样设置:
```nginx
location /app1 {
alias /path/to/app1/dist;
try_files $uri $uri/ @vue_app1;
}
location @vue_app1 {
root /path/to/app1/dist;
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html last;
break;
}
}
location /app2 {
alias /path/to/app2/dist;
try_files $uri $uri/ @vue_app2;
}
location @vue_app2 {
root /path/to/app2/dist;
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html last;
break;
}
}
```
这里`try_files`用于处理非静态请求,`rewrite`规则则是为了让history模式工作,将所有请求重定向到`index.html`。
2. **Vue项目配置**:
在Vue应用中,确保你已经设置了`base`字段指向实际的应用根路径,如`/app1`或`/app2`。这通常可以在`public/index.html`或`src/router/index.js`中完成。
3. **HTTP vs HTTPS**:
如果你同时支持HTTP和HTTPS,记得在Nginx配置中为HTTPS添加相应的SSL证书和监听端口,比如:
```nginx
server {
listen 80;
server_name example.com;
# HTTP配置...
# 更改为443并添加SSL配置 for HTTPS:
listen 443 ssl;
ssl_certificate /path/to/your.crt;
ssl_certificate_key /path/to/your.key;
# ...其他HTTPS配置
}
```
阅读全文