Vite/Rollup如何让JS Chunk从index.html同目录或相对路径加载？

问题核心是Vite默认的资源基础路径（base）为根路径/，导致生成的资源URL都带有前置斜杠。只需修改Vite配置中的base选项，配合你已有的entryFileNames配置，就能生成无前置斜杠的相对路径。

具体配置步骤 #

• 在vite.config.js或vite.config.ts中，添加base: './'配置项：

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    base: './', // 关键：设置为当前目录的相对路径
    build: {
      rollupOptions: {
        output: {
          entryFileNames: '[name]-[hash].js' // 你已有的文件名配置
        }
      }
    }
  })
  

效果验证 #

执行构建命令（如npm run build）后，检查生成的index.html，script标签的src会变成类似index-f727dfb8.js的格式，没有前置斜杠。将整个构建产物部署到static/public/export/目录下时，JS文件会和index.html同目录，浏览器能正确以相对路径加载资源，开发和生产环境都适用。

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