效果
目前有 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
export default new Router({
base: '/project1/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPath
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: []
})
// project2
export default new Router({
base: '/project2/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPath
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: []
})
[注意] 在 npm run build 可能会报错：.tap(*) 之类的，那是因为打包中的 html-webpack-plugin 版本出现了问题，可以执行下面的语句
# 这个版本就是你的 package.json 中的版本，只不过你需要重新再指定这个版本 $ npm i html-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 └─... # 其他文件
