vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue.js多项目同端口部署

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

作者：陶甜也

上下文路径是指 Web应用在服务器上的部署路径前缀,通过设置不同的上下文路径,多个应用可以共享同一个IP和端口,通过URL路径来区分,本文将从前端Vue.js配置到后端服务器部署,详细介绍完整的实现方案,感兴趣的朋友跟随小编一起看看吧

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

一、背景与需求

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

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

例如：

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

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

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

例如：

三、前端 Vue.js 配置

1. 配置 Vue Router 基础路径

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

// 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 配置构建后的资源路径：

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

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

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

3. 正确引用静态资源

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

❌ 错误的资源引用方式：

<!-- 硬编码绝对路径 -->
<img src="/static/img/logo.png">
<!-- CSS 中硬编码 -->
background: url(/static/img/background.jpg);

✅ 正确的资源引用方式：

<!-- 相对路径 -->
<img src="./static/img/logo.png">
<!-- 使用 require 方式（推荐） -->
<img :src="require('@/assets/img/logo.png')">
<!-- CSS 中使用相对路径 -->
background: url(../img/background.jpg);

4. API 请求路径处理

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

❌ 错误的请求方式：

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

✅ 正确的请求方式：

// 方式 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 配置示例

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 配置示例

<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. 构建项目

# 构建生产版本
npm run build

2. 部署到服务器

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

3. 验证访问

六、常见问题与排查

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

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

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

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

3. API 请求 404

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

4. 路由跳转错误

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

七、最佳实践

八、总结

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

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

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

到此这篇关于Vue.js 多项目同端口部署实战指南(上下文路径配置指南)的文章就介绍到这了,更多相关vue.js多项目同端口部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文