效果
目前有 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