Vue3+Vite子目录部署：Octopus变量替换base路径无效求助

核心问题：#{AppBaseUrl}未被替换为实际路径 #

你配置的base: "#{AppBaseUrl}"是占位符，但Vite不会自动解析这类模板变量，必须替换成实际的子目录路径才能生效。比如部署到https://my.domain.com/vue-app/，base应该设为'/vue-app/'（注意结尾的斜杠必须保留）。

具体修复步骤 #

1. 直接在vite.config.js中配置明确的base路径 #

修改vite.config.js：

// vite.config.js
export default defineConfig({
  base: '/vue-app/', // 替换成你的实际子目录路径
  // ... 其余配置
})

重新执行vite build后，构建后的index.html中资源路径会变成/vue-app/assets/index-789e2ef4.js，符合子目录部署要求。

2. 用环境变量动态配置（适合多环境部署） #

如果需要不同环境用不同base路径，可以借助Vite的环境变量：

• 在项目根目录创建.env.production文件，添加：

  VITE_APP_BASE_URL=/vue-app/
  

• 修改vite.config.js读取环境变量：

  // vite.config.js
  export default defineConfig({
    base: process.env.VITE_APP_BASE_URL,
    // ... 其余配置
  })
  

• 执行vite build时，Vite会自动加载.env.production中的变量。

3. 命令行参数的正确用法 #

如果用命令行指定base，不需要额外嵌套引号（或使用系统兼容的引号格式），直接执行：

vite build --base=/vue-app/

Windows系统可使用双引号：

vite build --base="/vue-app/"

额外注意：Vue Router的配套配置 #

如果项目使用了Vue Router，还需要在路由实例中同步设置base属性，否则路由跳转会出错：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory('/vue-app/'), // 与base路径保持一致
  routes: [/* 你的路由配置 */]
})

内容的提问来源于stack exchange，提问作者Oleg Oshkoderov