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

效果

目前有 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 更改对应项目名,譬如

?

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

?

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

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

?

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

?

Nginx 的配置

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

?

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

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

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

?

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

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

?

最后的调试

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://segmentfault.com/a/1190000018319774



相关文章
推荐文章
热门文章

微信公众号推荐

相关推荐