要在Nginx中配置多个Vue项目,您需要为每个项目设置不同的server块,并为每个项目提供不同的静态资源路径。以下是一个基本的配置示例:
http {
include mime.types;
default_type application/octet-stream;
# 第一个Vue项目的server配置
server {
listen 80;
server_name localhost;
location / {
root /path/to/your/first/vue/project/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
}
# 第二个Vue项目的server配置
server {
listen 80;
server_name localhost;
# 注意这里的路径和第一个项目不同
location / {
root /path/to/your/second/vue/project/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
}
}
确保将/path/to/your/first/vue/project/dist
和/path/to/your/second/vue/project/dist
替换为您的Vue项目的实际构建输出目录。
这里的关键点是每个Vue项目都有自己的server
块,它们在不同的端口或者不同的URL下提供服务。try_files $uri $uri/ /index.html;
指令确保了每个Vue项目都能正确处理前端路由。
参考:百度AI
两种配置方式
如何在nginx配置多个vue项目?第一种是使用不同的端口,既配置多个server即可。第二种是同一个端口,既在一个server里面配置多个vue项目。
参考2:https://blog.csdn.net/BluerCat/article/details/131207177
方法一:使用多个server配置多个vue项目(使用多个端口)
这个方式最简单,将第一份server配置拷贝一下,稍微调整一下就可以了,示例如下:
server {
listen 9001;
server_name localhost;
# 这个是第一个vue项目 页面访问地址 http://ip:9001/one
location /one {
root /home/project/dist/;
index index.html index.htm;
try_files $uri $uri/ /index.html; # 防止页面刷新404
}
... ...
}
server {
listen 9002;
server_name subhost;
# 这个是第二个vue项目 页面访问地址 http://ip:9002/two
location /two {
root /home/sub_project/dist/;
index index.html;
try_files $uri $uri/ /index.html; # 防止页面刷新404
}
... ...
}
方法二:在一个server配置多个项目(共用一个端口)
多个端口,只需要调整nginx配置,若使用同一个端口,则需要稍微调整一下vue打包配置。
server {
listen 9001;
server_name localhost;
# 这个是第一个vue项目 页面访问地址 http://ip:9001
location / {
root /home/project/dist/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 这个是第二个vue项目 页面访问地址 http://ip:9001/sub
location /sub {
alias /home/sub_project/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
}