Azure DevOps中Vite+Vue3构建目标路径YAML配置报错求助

Vite 不再支持 Vue CLI 的 --dest 参数，对应的替代方案有两种：

1. 命令行替换为Vite原生参数 #

Vite 使用 --outDir 指定构建输出目录，直接修改YAML中的执行命令即可：

VUE_APP_BUILD_FILE=${{ parameters.file }} npm run build -- --outDir ${{ parameters.file }}

--outDir 的作用和原Vue CLI的--dest完全一致，用于指定构建产物的输出路径。

2. 通过Vite配置文件设置输出目录 #

如果希望避免在命令行传递参数，可以在项目的vite.config.js中配置build.outDir，读取环境变量来动态指定路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: process.env.VUE_APP_BUILD_FILE
  }
})

此时YAML中的命令可以简化为：

VUE_APP_BUILD_FILE=${{ parameters.file }} npm run build

这种方式更适合多环境配置复用的场景。

内容的提问来源于stack exchange，提问作者R-b-n