使用nginx同域名下部署多个vue项目并使用反向代理的方法

2023-08-28 11:51:14 73

效果

目前有2个项目（project1,project2），还有一个nginx自带的index.html，我添加了对应的链接代码（稍后粘贴出来），为了统一管理子项目的路由。

我期望实现下面的效果（假设ip:localhost，port:8080）：

http://localhost:8080/进入最外层的index.html
http://localhost:8080/project1进入项目一
http://localhost:8080/project2进入项目二

废话不多说，开始配置

Vue的配置

本人使用的是vue-cli2搭建的项目，所以对应的需要修改一些vue的配置参数。

config文件夹下的index.js，因为是打包，所以我们需要在build.assetsPublicPath更改对应项目名，譬如

//project1
module.exports={
dev:{},
build:{
assetsPublicPath:'/project1/'//注意前后的‘/'
}
}

//project2
module.exports={
dev:{},
build:{
assetsPublicPath:'/project2/'//注意前后的‘/'
}
}

config文件夹下的prod.env.js修改成这样：

//project1
module.exports={
NODE_ENV:'"production"',
BASE_API:'"/api/pro1"'//这里待会与nginx配置对应
}

//project2
module.exports={
NODE_ENV:'"production"',
BASE_API:'"/api/pro2"'//这里待会与nginx配置对应
}

[注意]因为我在项目中使用到了BASE_API作为代理的前缀，如果你的不在这边，你需要找到你自己的代理配置

因为每个人的vue-router文件配置不一样，你需要找到你的router配置文件，内部修改为：

//我采用了history模式，hash模式我没有测试，感觉应该是一样的效果
//project1
exportdefaultnewRouter({
base:'/project1/',//注意更改你子项目名，这个对应你的build.assetsPublicPath
mode:'history',
scrollBehavior:()=>({y:0}),
routes:[]
})

//project2
exportdefaultnewRouter({
base:'/project2/',//注意更改你子项目名，这个对应你的build.assetsPublicPath
mode:'history',
scrollBehavior:()=>({y:0}),
routes:[]
})

[注意]在npmrunbuild可能会报错：.tap(*)之类的，那是因为打包中的html-webpack-plugin版本出现了问题，可以执行下面的语句

#这个版本就是你的package.json中的版本，只不过你需要重新再指定这个版本

$npmihtml-webpack-plugin@4.0.0-alpha-D

Nginx的配置

首先我的目录是这样的，无关文件全部以...展示

.
├─conf
│├─...#其他文件
│└─nginx.conf
│
├─html#只看这里，其他暂时我没用到
│├─project1
││└─static
││├─css
││├─fonts
││└─js
││├─g
││└─V
│├─project2
││└─static
││├─css
││├─fonts
││└─js
││├─g
││└─V
│├─index.html
│└─50x.html
└─...#其他文件

[解释]我的nginx目录就是原生的，内部包含了一个html文件夹，为了省事，我直接使用这个，当然你也可以指定其他的目录，但是目前还请和我一样的配置，后面可以自己定制化。

现在我们开始配置在conf文件夹下的nginx.conf文件

我是直接在原始文件上修改的，而修改的配置都是在http模块中，所以其他的不需要的代码我直接用...代替。

#...
#反向代理
http{
includemime.types;
default_typeapplication/octet-stream;

#log_formatmain'$remote_addr-$remote_user[$time_local]"$request"'
#'$status$body_bytes_sent"$http_referer"'
#'"$http_user_agent""$http_x_forwarded_for"';

sendfileon;
keepalive_timeout65;

client_max_body_size20M;
client_body_buffer_size10M;
large_client_header_buffers4128k;

#这里可以做集群
upstreamp1_server{
serverlocalhost:8081;
}

#这里可以做集群
upstreamp2_server{
serverlocalhost:8082;
}

server{
listen8080;
server_namelocalhost;
charsetutf-8;

proxy_connect_timeout180;
proxy_send_timeout180;
proxy_read_timeout180;
proxy_set_headerHost$host;
proxy_set_headerX-Forwarder-For$remote_addr;

roothtml;#这里指定刚刚我们的文件夹

#总的项目路由，我偷懒直接写在了同一个文件
#如果有很多可以在配置多个conf文件，使用include关联进来
location/{
try_files$uri$uri//index.html;#这里可以理解指定到html文件夹下的index.html
}

#project1
#这里就是刚刚我们在vue项目中config/index.js的配置build.assetsPublicPath，
#也是vue项目中配置的router中的base
location^~/project1{
try_files$uri$uri//project1/index.html;#这里可以理解指定到html文件夹下project1文件夹的index.html
}

#project2
#这里是项目二的配置
location^~/project2{#
try_files$uri$uri//project2/index.html;#这里可以理解指定到html文件夹下project2文件夹的index.html
}

#这里是project1配置需要调用的接口
location/api/pro1{#这里就是在vue项目中prod.env.js的配置BASE_API
proxy_redirectoff;
proxy_set_headerHost$host;
proxy_set_headerX-Real-IP$remote_addr;
proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;
proxy_passhttp://p1_server;#此处的p1_server对应的上面的配置upstreamp1_server{}，这里可以做集群，我用不到，就简单配置了
}

#这里是project1配置需要调用的接口
location/api/pro2{#这里就是在vue项目中prod.env.js的配置BASE_API
proxy_redirectoff;
proxy_set_headerHost$host;
proxy_set_headerX-Real-IP$remote_addr;
proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;
proxy_passhttp://p2_server;#此处的p2_server对应的上面的配置upstreamp2_server{}，这里可以做集群，我用不到，就简单配置了
}

#...
}

#...
}

最后贴出我修改的index.html的代码

因为我是追加的，所以直接贴出我追加的代码，其他的采用...

...

Thankyouforusingnginx.

项目一|项目二

最后的调试

所有的配置完成，我们就可以启动nginx了，这个不会的请自行解决了。

启动成功，我们在浏览器输入http://localhost:8080我们就可以看到，

点击项目一，我们可以看到链接变为http://localhost:8080/project1

点击项目二，链接变为http://localhost:8080/project2，完全符合我们的期望，那就成功了。

[强行解释一下玄学]那天配置好了，一启动就报错，弄的我最后放弃了。但是第二天，准备在检查下，一启动竟然全好了，我都一脸懵逼啊！如果你也遇到和我一样的问题，先放放，说不定隔天就好了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

使用nginx同域名下部署多个vue项目并使用反向代理的方法

热门推荐

随机推荐