vue多项目nginx部署

最新推荐文章于 2025-10-26 13:13:53 发布

原创最新推荐文章于 2025-10-26 13:13:53 发布 · 1.6w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #域名 #实例

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

nginx

1 篇文章

订阅专栏

本文介绍如何在同一域名下配置并部署多个Vue项目，包括客户端配置修改步骤及Nginx服务器的具体配置方法。

一. 项目目的

1. 问题

实现服务端同一域名下部署多个vue项目。

2. 实例说明

kefu项目: https://www.test.com/kefu/...

collect项目: https://www.test.com/collect/...

lend项目: https://www.test.com/lend/...

二. 客户端配置修改

1. index.html文件修改

添加 <meta base="/ lend/">

2. config/index.js文件修改

修改 assetsPublicPath: '/lend/',

3.src/router/index.js文件修改

添加 base: '/lend/',

三． Nginx配置修改

1. 配置

server {
      listen 9900;
      server_name localhost;
      root C:/Users/echo/Desktop/wxpage;
      location /kefu {
        try_files $uri $uri/ /kefu/index.html;
      }
      location /collect {
        try_files $uri $uri/ /collect/index.html;
      }
      location /lend {
        try_files $uri $uri/ /lend/index.html;
      }
    }