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

// 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

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

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

<!-- 硬编码绝对路径 -->
<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);

// 会请求到 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')

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; # 注意包含上下文路径的重写
    }
}

<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>

# 构建生产版本
npm run build