Vue.js 多项目同端口部署实战：上下文路径配置指南

复制代码

    # Vue.js 多项目同端口部署实战：上下文路径配置指南

一、背景与需求

在实际项目开发中，我们经常会遇到这样的需求：

已有的服务器上运行着一个 Vue 项目（主项目），现在需要在不开启新端口 的情况下，部署另一个 Vue 项目（如数据大屏、管理后台等），通过不同的路径前缀来区分访问。

例如：

主项目：http://your-domain.com/（已运行）
数据大屏：http://your-domain.com/datav/（需要新增）

这种部署方式称为上下文路径（Context Path）部署。本文将从前端 Vue.js 配置到后端服务器部署，详细介绍完整的实现方案。

二、核心概念：上下文路径

上下文路径是指 Web 应用在服务器上的部署路径前缀。通过设置不同的上下文路径，多个应用可以共享同一个 IP 和端口，通过 URL 路径来区分。

例如：

应用 A 上下文路径：/ → 访问地址：http://domain/
应用 B 上下文路径：/datav → 访问地址：http://domain/datav/
应用 C 上下文路径：/admin → 访问地址：http://domain/admin/

三、前端 Vue.js 配置

1. 配置 Vue Router 基础路径

Vue Router 的 base 配置项用于设置路由的基础路径，所有路由都会自动添加这个前缀。

javascript 复制代码

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/view/Home.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history', // 必须使用 history 模式
  base: process.env.NODE_ENV === 'production' ? '/datav/' : '/', // 根据环境动态设置
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/view/Dashboard.vue')
    }
  ]
})

export default router

2. 配置 Webpack 资源路径

在 Vue CLI 2.x 中，通过 config/index.js 的 assetsPublicPath 配置构建后的资源路径：

javascript 复制代码

// config/index.js
module.exports = {
  build: {
    // ...
    // 配置资源的公共访问路径
    assetsPublicPath: '/datav', // 生产环境上下文路径
    // ...
  },
  dev: {
    // ...
    assetsPublicPath: '/', // 开发环境使用根路径
    // ...
  }
}

在 Vue CLI 3+ 中，通过 vue.config.js 的 publicPath 配置：

javascript 复制代码

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/datav/' : '/',
  // ...
}

3. 正确引用静态资源

避免使用硬编码的绝对路径引用资源，这会导致资源加载失败。

❌ 错误的资源引用方式：

html 复制代码

<!-- 硬编码绝对路径 -->
<img src="/static/img/logo.png">

<!-- CSS 中硬编码 -->
background: url(/static/img/background.jpg);

✅ 正确的资源引用方式：

html 复制代码

<!-- 相对路径 -->
<img src="./static/img/logo.png">

<!-- 使用 require 方式（推荐） -->
<img :src="require('@/assets/img/logo.png')">

<!-- CSS 中使用相对路径 -->
background: url(../img/background.jpg);

4. API 请求路径处理

确保 API 请求也能正确处理上下文路径：

❌ 错误的请求方式：

javascript 复制代码

// 会请求到 http://domain/api/data，而非 http://domain/datav/api/data
axios.get('/api/data')

✅ 正确的请求方式：

javascript 复制代码

// 方式 1：使用相对路径（推荐）
axios.get('api/data') // 自动带上上下文路径

// 方式 2：动态构建 API 基础路径
const apiBaseUrl = process.env.NODE_ENV === 'production' ? '/datav/api' : '/api'
axios.get(`${apiBaseUrl}/data`)

// 方式 3：配置 axios 基础路径
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/datav/api' : '/api'
axios.get('/data')

四、后端服务器配置

前端配置完成后，后端服务器需要支持 URL 重写，确保上下文路径下的路由能正确指向对应的项目。

1. Nginx 配置示例

nginx 复制代码

server {
    listen 80;
    server_name your-domain.com;
    
    # 主项目配置（上下文路径：/）
    location / {
        root /path/to/main-project/dist;
        index index.html;
        try_files $uri $uri/ /index.html; # 处理 Vue history 模式
    }
    
    # 数据大屏项目配置（上下文路径：/datav）
    location /datav {
        alias /path/to/dashboard-project/dist;
        index index.html;
        try_files $uri $uri/ /datav/index.html; # 注意包含上下文路径的重写
    }
}

2. Apache 配置示例

apache 复制代码

<VirtualHost *:80>
    ServerName your-domain.com
    
    # 主项目配置
    DocumentRoot /path/to/main-project/dist
    <Directory /path/to/main-project/dist>
        AllowOverride All
        Require all granted
        RewriteEngine On
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>
    
    # 数据大屏项目配置
    Alias /datav /path/to/dashboard-project/dist
    <Directory /path/to/dashboard-project/dist>
        AllowOverride All
        Require all granted
        RewriteEngine On
        RewriteBase /datav/
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /datav/index.html [L]
    </Directory>
</VirtualHost>

五、部署与验证

1. 构建项目

bash 复制代码

# 构建生产版本
npm run build

2. 部署到服务器

将构建生成的 dist 目录上传到服务器的指定位置（与服务器配置中的路径一致）。

3. 验证访问

访问主项目：http://your-domain.com/
访问数据大屏：http://your-domain.com/datav/
验证路由跳转：http://your-domain.com/datav/dashboard
验证资源加载：检查页面元素和网络请求，确保资源都能正确加载

六、常见问题与排查

1. 404 错误（页面刷新或直接访问路由）

原因：服务器没有正确配置 URL 重写规则。
解决：检查服务器配置中的 try_files（Nginx）或 RewriteRule（Apache）是否正确。

2. 静态资源加载失败（CSS/JS/图片）

原因：资源引用路径错误或 assetsPublicPath 配置不当。
解决：确保 assetsPublicPath 与上下文路径一致，避免硬编码绝对路径。

3. API 请求 404

原因：API 请求路径没有包含上下文路径。
解决：使用相对路径或动态构建 API 基础路径。

4. 路由跳转错误

原因：Vue Router 的 base 配置与实际上下文路径不匹配。
解决：确保 base 配置与服务器部署的上下文路径一致。

七、最佳实践

开发与生产环境分离：使用环境变量动态配置上下文路径，便于本地开发和线上部署。
避免硬编码：所有资源路径和 API 请求都使用相对路径或动态构建，避免硬编码绝对路径。
统一上下文路径 ：前端的 base 配置和后端的服务器配置必须使用相同的上下文路径。
使用 Vue CLI 3+：新版本的 Vue CLI 提供了更简洁的配置方式，减少配置错误。
测试完整流程：部署后测试所有路由、资源加载和 API 请求，确保完整功能正常。

八、总结

通过上下文路径配置，我们可以在不开启新端口的情况下，在同一服务器上部署多个 Vue 项目。关键在于：

前端：正确配置 Vue Router 的 base 和 Webpack 的资源路径。
后端：配置服务器的 URL 重写规则，支持上下文路径。

这种部署方式不仅节省了服务器资源，还便于统一管理和维护多个相关项目。希望本文能帮助你顺利完成多项目同端口部署任务！

如果对你有帮助，欢迎点赞、收藏并关注我，获取更多前端技术干货！