vite不支持 require 使用require报错如何解决

最新推荐文章于 2026-05-11 18:21:58 发布

原创最新推荐文章于 2026-05-11 18:21:58 发布 · 7.5k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

当使用Vite时，遇到不支持require()的情况，特别是在CSS或变量中引用本地图片时会导致错误。为了解决这个问题，可以按照以下步骤操作：首先，通过npm安装vite-plugin-require-transform插件；然后，在vite.config.js文件中导入并配置该插件，指定fileRegex匹配.js或.vue文件。这样就能使Vite支持require()并处理本地图片引用了。

vite默认不支持 require 如果在css中或者变量中引入本地图片地址需要 require() 这时会报错

解决方法

1.npm 引入

npm i vite-plugin-require-transform --save-dev

2.vite.config.js

import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.vue$/
    }),
  ],
});