// 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/' : '/', // 根據(jù)環(huán)境動(dòng)態(tài)設(shè)置
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/view/Dashboard.vue')
    }
  ]
})
export default router

// config/index.js
module.exports = {
  build: {
    // ...
    // 配置資源的公共訪問(wèn)路徑
    assetsPublicPath: '/datav', // 生產(chǎn)環(huán)境上下文路徑
    // ...
  },
  dev: {
    // ...
    assetsPublicPath: '/', // 開(kāi)發(fā)環(huán)境使用根路徑
    // ...
  }
}

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

<!-- 硬編碼絕對(duì)路徑 -->
<img src="/static/img/logo.png">
<!-- CSS 中硬編碼 -->
background: url(/static/img/background.jpg);

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

// 會(huì)請(qǐng)求到 http://domain/api/data，而非 http://domain/datav/api/data
axios.get('/api/data')

// 方式 1：使用相對(duì)路徑（推薦）
axios.get('api/data') // 自動(dòng)帶上上下文路徑
// 方式 2：動(dòng)態(tài)構(gòu)建 API 基礎(chǔ)路徑
const apiBaseUrl = process.env.NODE_ENV === 'production' ? '/datav/api' : '/api'
axios.get(`${apiBaseUrl}/data`)
// 方式 3：配置 axios 基礎(chǔ)路徑
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/datav/api' : '/api'
axios.get('/data')

server {
    listen 80;
    server_name your-domain.com;
    # 主項(xiàng)目配置（上下文路徑：/）
    location / {
        root /path/to/main-project/dist;
        index index.html;
        try_files $uri $uri/ /index.html; # 處理 Vue history 模式
    }
    # 數(shù)據(jù)大屏項(xiàng)目配置（上下文路徑：/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
    # 主項(xiàng)目配置
    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>
    # 數(shù)據(jù)大屏項(xiàng)目配置
    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>

# 構(gòu)建生產(chǎn)版本
npm run build