Vite项目打包时如何移除导入语句开头的斜杠？

问题场景 #

开发阶段一切正常，但本地应用（非网页应用）无法解析以/开头的导入语句。需要将构建前的import something from '/file.svg'，在打包后转为import something from 'assets/file.svg'，而非当前得到的import something from '/assets/file.svg'，调整base配置无效。

解决方案 #

1. 自定义Vite插件处理路径替换

通过Vite插件的transform钩子，在构建阶段（仅生产环境）替换代码中的导入路径，移除开头的斜杠并添加assets/前缀。

修改vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'replace-root-import',
      transform(code) {
        // 仅在生产构建时执行替换
        if (process.env.NODE_ENV === 'production') {
          // 匹配所有以/开头的导入路径，替换为assets/开头的相对路径
          return code.replace(/from\s+['"]\/([^'"]+)['"]/g, "from 'assets/$1'");
        }
        return code;
      }
    }
  ],
  // 其他原有配置...
});

2. 确保静态资源输出路径匹配替换后的导入路径

如果资源原本放在public文件夹中，默认构建后会输出到dist根目录，此时替换后的assets/file.svg会找不到文件。需要将public中的资源复制到dist/assets目录，可借助vite-plugin-static-copy插件实现：

1. 安装插件：

npm install vite-plugin-static-copy --save-dev

2. 更新vite.config.js：

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'public/**/*', // 匹配public下所有文件
          dest: 'assets' // 输出到dist/assets目录
        }
      ]
    }),
    // 保留之前的路径替换插件
    {
      name: 'replace-root-import',
      transform(code) {
        if (process.env.NODE_ENV === 'production') {
          return code.replace(/from\s+['"]\/([^'"]+)['"]/g, "from 'assets/$1'");
        }
        return code;
      }
    }
  ],
  // 其他原有配置...
});

说明 #

• 自定义插件仅在生产构建时生效，不会影响开发阶段的路径解析
• 静态资源复制规则可根据实际需求调整，比如仅复制特定文件而非整个public目录

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