如何修改Vite编译文件的资源路径前缀且不改变实际目录？

你需要给资源引用路径添加指定前缀但不改变实际文件存放目录，正确做法是配置Vite的base选项，而非修改assetsDir：

问题原因 #

你之前修改assetsDir的方式会改变资源文件的实际存放位置（资源会被放到outDir/modules/test目录下），这和需求不符。assetsDir的作用是设置资源在输出目录内的子文件夹名称，不是用来给引用路径加前缀的。

正确配置 #

在vite.config.js的根级别添加base配置项，值设为你需要的路径前缀'/modules/test/'：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  // 添加base配置，设置资源引用的基础路径前缀
  base: '/modules/test/',
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir: "../../SD/modules/test", // test是项目名称
    // 保持默认assetsDir即可，无需修改（默认值为"assets"）
  },
})

效果说明 #

• 构建后，资源文件依然会输出到../../SD/modules/test/assets/目录下，实际目录结构完全不变
• index.html中的资源引用路径会自动加上前缀，变成modules/test/assets/index-c371877d.js，完全符合你的需求

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