使用 vite 和 webpack 双重构建时的 svg

Question

简而言之运行，我需要在从 vue 2/webpack 转换到 vue 3/vite 时同时维护 webpack 和 vite 构建。否则我们将永远找不到时间迁移到 vite。

我找到了解决很多差异的方法，因此两者的代码相同。不过，我坚持这一点。我正在导入一个包含内联的 svg。

在 vue 2/webpack 中我这样做：

import myimage from "!rawloader!@/assets/icons/myimage.svg"

在 vue 3/vite 中我这样做：

import myimage from "@/assets/icons/myimage.svg?raw"

如果我将 ?raw 添加到 webpack 版本，它会起作用，所以我想做的是能够在 vite 版本中添加 !rawloader! 并让 vite 忽略它。这可能吗？

我的第一个想法是像这样在 vite.config.ts 中定义：

define: {
  '!rawloader!': '',
}

但这给了我错误：

✘ [ERROR] The define key "!rawloader!" must be a valid identifier

✘ [ERROR] Invalid define value (must be valid JSON syntax or a single identifier):

有没有办法告诉vite通过文本替换完全过滤掉特定的字符串？

或者，有没有办法在没有 !rawloader! 的情况下在 webpack 中加载 svg？

Answer 1

您可以在vite.config.js中定义别名:

export default defineConfig({
    ...
    resolve: {
        alias: {
            "!rawloader!": ''
        }
    }
})

svg while dual building with vite and webpack