效果

目前有 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 更改對應項目名，譬如

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

config 文件夾下的 prod.env.js 修改成這樣：

// project1module.exports = { NODE_ENV: '"production"', BASE_API: '"/api/pro1"' // 這里待會與 nginx 配置對應}// project2module.exports = { NODE_ENV: '"production"', BASE_API: '"/api/pro2"' // 這里待會與 nginx 配置對應}

[注意] 因為我在項目中使用到了 BASE_API 作為代理的前綴，如果你的不在這邊，你需要找到你自己的代理配置

因為每個人的 vue-router 文件配置不一樣，你需要找到你的 router 配置文件，內部修改為：

// 我采用了 history 模式，hash 模式我沒有測試，感覺應該是一樣的效果// project1export default new Router({ base: '/project1/', // 注意更改你子項目名，這個對應你的 build.assetsPublicPath mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: []})// project2export 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└─... # 其他文件