vue2+vite+@vitejs/plugin-vue2可以使用require引用图片资源

原创已于 2024-03-05 11:21:02 修改 · 921 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-03-05 11:20:27 首次发布

文章探讨了在Vue2与Vite项目中require的使用情况，指出vue2+vite可以通过@vitejs/plugin-vue2处理require语法，而vue3+vite由于新开发需求，不支持require，推荐使用import.meta.url。

很多文章都说vite不能用require，vue3+vite确实是这样的，但今天无意间发现vue2+vite中是可以使用require引用资源的

vue3搭配vite一般使用的是@vitejs/plugin-vue解析vue语法，而vue2使用的则是另一个插件@vitejs/plugin-vue2插件解析vue语法

看下了@vitejs/plugin-vue2源码在src/template.ts中，对require语法做了处理，匹配到后进行语法替换

function transformRequireToImport(code: string): string {
  const imports: Record<string, string> = {}
  let strImports = ''

  code = code.replace(
    /require\(("(?:[^"\\]|\\.)+"|'(?:[^'\\]|\\.)+')\)/g,
    (_, name): any => {
      if (!(name in imports)) {
        // #81 compat unicode assets name
        imports[name] = `__$_require_${hash(name)}__`
        strImports += `import ${imports[name]} from ${name}\n`
      }

      return imports[name]
    }
  )

  return strImports + code
}