如何在 Vue 的 css 部分中加载外部 svg

Posted 2023-02-23

【中文标题】如何在 Vue 的 css 部分中加载外部 svg

【英文标题】：How load external svg in css section in Vue

【发布时间】：2020-03-29 06:33:19

【问题描述】：

我需要在我的 Vue 组件的 css 部分加载外部 svg 图像。我有 vue.config.js 文件，如下所示：

const path = require('path');
module.exports = 
  lintOnSave: false,
  chainWebpack: config => 
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();

    svgRule
      .oneOf('external')
        .resourceQuery(/\?external/)
        .use('file')
          .loader('file-loader')
          .options(
            name: 'assets/[name].[hash:8].[ext]'
          )
          .end()
          .end()
      .oneOf('inline')
          .include
          .add(path.resolve(__dirname, 'src/components/svg'))
          .end()
        .use('vue-svg-loader')
          .loader('vue-svg-loader')
          .end()
          .end()
  
;

当我像这样从 html 模板加载 svg 图像时，一切正常。

<template>
    <div>
        <img src="@/components/svg/close-icon.svg?external"  />
    </div>
</template>

这样我可以看到比在 DevTools 文件的网络选项卡中加载的哈希值，我可以在页面上看到它。 但是当我尝试通过组件的 css 部分加载它时，它失败了。首先，我无法使用@ 设置路径，例如'@/components/svg/close-icon.svg?external，vue 显示找不到模块的错误消息。所以我尝试'/src/components/svg/close-icon.svg?external 路径。你可以在下面看到它。

<template>
  <button>Button</button>
</template>

...

<style lang="sass" scoped>
button
    background: url('/src/components/svg/check-icon.svg?external')
</style>

现在 vue 不会抛出错误，但我在 DevTools 中看到文件路径没有散列并且看起来像 http://localhost:8080/src/components/svg/check-icon.svg?external，所以文件无法加载。我如何配置 webpack 以从 css 部分加载外部 svg 图像。

【问题讨论】：

尝试使用相对路径 "./svg/check-icon.svg?external" 这将有助于 webpack。

谢谢，它可以工作，但我认为有更好的方法来使用它，如果我将分离组件并将它们放在内部文件夹中，则使用@ 符号表示绝对路径。但由于某种原因，它不起作用。

【参考方案1】：

来自css-loader的文档：

从 node_modules 路径导入资产（包括 resolve.modules） 对于别名，请在其前面加上 ~:

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

【讨论】：

它可用于从 node_modules 路径导入资产，但不能用于我需要的文件夹 src。 cli.vuejs.org/guide/…

我以为你在使用别名...@ 是文件夹别名。