效果
目前有两个项目(项目1、项目2 )和nginx附带的index.html。 添加了对应的链接代码(稍后粘贴)。 是为了统一管理子项目的路由选择。期待着接下来的效果。 假设IP :本地主机，端口： 8080。
http://localhost:8080/进入最外层的index.html
进入358 localhost :8080 /项目1项目1
3358localhost:8080/project2进入项目2
复制代码是无稽之谈。 开始配置
Vue 的配置
由于本人使用的是用vue-cli2构建的项目，因此需要修改vue的配置参数以应对。由于config文件夹下的index.js已打包，因此需要在build.assetsPublicPath中重命名相应的项目，如//project1
module .导出={
dev: {}、
build: {
注意assetspublicpath : '/project1//前后的‘/’
}
}
//项目2
module .导出={
dev: {}、
build: {
注意assetspublicpath : '/project2//前后的‘/’
}
}
复制代码config文件夹下的prod.env.js，并将其修改为//project1
module .导出={
node _ env :“生产”、
base _ API :“/API/pro 1“//此处与nginx配置对应
}
//项目2
module .导出={
node _ env :“生产”、
base _ API :“/API/pro2“//此处与nginx配置对应
}
代码副本[注意]因为我在项目中使用了BASE_API作为代理前缀，所以如果你不在这里，就需要找到你自己的代理配置
vue-router文件的结构因人而异，因此需要找到你的router配置文件。 在内部，//我采用了历史模式。 没有测试hash模式。 应该感受到同样的效果
//project1
导出默认新路由器({ (
注意base: '/project1/子项目的重命名。 这与你的build.assetsPublicPath相对应
模式：历史记录，
滚动基站y: (() y: )、
路由器：
() )
//项目2
导出默认新路由器({ (
注意base: '/project2/子项目的重命名。 这与你的build.assetsPublicPath相对应
模式：历史记录，
滚动基站y: (() y: )、
路由器：
() )
复制代码[注意npm run build可能会发生错误。 tap(* )等。 这是因为正在打包的html-web包插件版本有问题。 可以执行以下语句
# #这个版本是你的package.json版本，但是需要重新指定这个版本
$ NPM ihtml-web包插件@4.0.0-阿尔法-d
复制代码
Nginx 的配置
后，首先我的目录会变成这样。 所有无关的文件将在. 中展示。conf
()……#其他文件
nginx.conf
只看到这里，其他暂时没有使用
项目1
()静态
CSS
丰特斯
日本铁路公司
g
() )
项目2
()静态
CSS
丰特斯
日本铁路公司
g
() )
index.html
50x.html
()……#
复制代码[解释]我的nginx目录是本机的，内部包含html文件夹。 为了省事，我直接用这个。 当然，也可以指定其他目录，但是现在的配置和我一样，以后请自己定制。
从现在开始，放置在conf文件夹下的nginx.conf文件直接在原始文件中修改了，但是修改后的配置都在http模块中，所以其他不需要的代码直接用. 替换。
# .
# #反向代理
http {
包括mime.types
; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; sendfile on; keepalive_timeout 65; client_max_body_size 20M; client_body_buffer_size 10M; large_client_header_buffers 4 128k; # 这里可以做集群 upstream p1_server { server localhost:8081; } # 这里可以做集群 upstream p2_server { server localhost:8082; } server { listen 8080; server_name localhost; charset utf-8; proxy_connect_timeout 180; proxy_send_timeout 180; proxy_read_timeout 180; proxy_set_header Host $host; proxy_set_header X-Forwarder-For $remote_addr; root html; # 这里指定刚刚我们的文件夹 # 总的项目路由，我偷懒直接写在了同一个文件 # 如果有很多可以在配置多个 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_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://p1_server; # 此处的 p1_server 对应的上面的配置 upstream p1_server {}，这里可以做集群，我用不到，就简单配置了 } # 这里是 project1 配置需要调用的接口 location /api/pro2 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {}，这里可以做集群，我用不到，就简单配置了 } # ... } # ... } 复制代码最后贴出我修改的 index.html 的代码因为我是追加的，所以直接贴出我追加的代码，其他的采用 ...
... <p><em>Thank you for using nginx.</em></p> <!-- 为了展示位置 --> <!-- start: 追加--> <hr> <a rel="external nofollow" href="/project1">项目一</a> | <a rel="external nofollow" href="/project2">项目二</a> <!-- end: 追加--> </body> <!-- 为了展示位置 --> 复制代码最后的调试
所有的配置完成，我们就可以启动 nginx 了，这个不会的请自行解决了。
启动成功，我们在浏览器输入 http://localhost:8080 我们就可以看到，
点击项目一，我们可以看到链接变为 http://localhost:8080/project1
点击项目二，链接变为 http://localhost:8080/project2，完全符合我们的期望，那就成功了。