Vue SVG 加载器未准确加载答案

【问题标题】：Vue SVG loader is not loading accuratelyVue SVG 加载器未准确加载
【发布时间】：2021-12-09 21:09:38
【问题描述】：

我在使用 svg 加载程序时遇到问题。我试图加载文件，但它在控制台中给了我这个错误

runtime-dom.esm-bundler.js?830f:21 Uncaught DOMException: Failed to 在“文档”上执行“createElement”：提供的标签名称 ('/assets/twitter-brands.6620c8ae.svg') 不是有效名称。在 createElement (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:290:19) 在 mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3910:29) 在 processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3898:13) 在补丁（webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3818:21）在 mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4008:13) 在 mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3917:17) 在 processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3898:13) 在补丁（webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3818:21）在 ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4357:21) 在 ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:195:29) createElement@runtime-dom.esm-bundler.js?830f:21 mountElement@ runtime-core.esm-bundler.js?5c40:3771 processElement @ runtime-core.esm-bundler.js?5c40:3750 补丁@ runtime-core.esm-bundler.js?5c40:3670 mountChildren @ runtime-core.esm-bundler.js?5c40:3869 mountElement @ runtime-core.esm-bundler.js?5c40:3778 processElement @ runtime-core.esm-bundler.js?5c40:3750 补丁@ runtime-core.esm-bundler.js?5c40:3670 componentUpdateFn @ runtime-core.esm-bundler.js?5c40:4218 运行@ 反应性.esm-bundler.js?a1e9:160 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4337 mountComponent @ runtime-core.esm-bundler.js?5c40:4120 processComponent @ runtime-core.esm-bundler.js?5c40:4078 补丁@ runtime-core.esm-bundler.js?5c40:3673 mountChildren @ runtime-core.esm-bundler.js?5c40:3869 processFragment @ runtime-core.esm-bundler.js?5c40:4037 补丁@ runtime-core.esm-bundler.js?5c40:3666 componentUpdateFn @ runtime-core.esm-bundler.js?5c40:4218 运行@ 反应性.esm-bundler.js?a1e9:160 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4337 mountComponent @ runtime-core.esm-bundler.js?5c40:4120 processComponent @ runtime-core.esm-bundler.js?5c40:4078 补丁@ runtime-core.esm-bundler.js?5c40:3673 渲染@ runtime-core.esm-bundler.js?5c40:4822 mount @ runtime-core.esm-bundler.js?5c40:3157 app.mount @ runtime-dom.esm-bundler.js?830f:1572 eval @ main.js?56d7:11 ./src/main.js@app.js:1277 webpack_require @ app.js:849 fn @ app.js:151 1 @ app.js:1350 webpack_require @app.js:849 checkDeferredModules @app.js:46（匿名）@app.js:925（匿名）@app.js:928 再显示5帧

这是代码的截图。服务正在正确编译它并且没有给出任何错误。路径绝对正确。

这里是代码。

<template>
  <header>
    <nav class="container">
      <div class="branding">
        <router-link class="header" :to="{ name: 'Home' }"
          >Fireblogs</router-link
        >
      </div>
      <div class="nav-link">
        <ul>
          <router-link class="link" to="#">Home</router-link>
          <router-link class="link" to="#">Blogs</router-link>
          <router-link class="link" to="#">Create Post</router-link>
          <router-link class="link" to="#">Login/Register</router-link>
        </ul>
      </div>
    </nav>
    <!-- Menu Icon -->
    <menuIcon />
  </header>
</template>

<script>
import menuIcon from "../assets/Icons/twitter-brands.svg";
export default {
  name: "Navigation",
  components: {
    menuIcon,
  },
};
</script>

这是 package.json 代码

{
  "name": "vue-with-firebase",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^9.1.3",
    "vue": "^3.0.0",
    "vue-firebase": "^1.0.8",
    "vue-router": "^4.0.0-0",
    "vue2-editor": "^2.10.3",
    "vuefire": "^2.2.5",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-svg-loader": "^0.16.0",
    "vue-template-compiler": "^2.6.14"
  }
}

【问题讨论】：

你是否在 webpack 配置中添加了 vue-svg-loader？
我在 vue.config.js 文件中添加了
vue-svg-loader.js.org

标签： node.js webpack vuejs3

【解决方案1】：

经过长时间的研究，我已经解决了这个错误。我没有使用相同版本的 vue 和 vue 模板编译器。我通过重新安装它们来解决这个问题

重新安装 vue

npm i vue@latest --save
npm i vue-template-compiler@latest --save
npm i vue-server-renderer@latest --save

在这些之后，我还使用@latest重新安装了其他依赖项

【讨论】：