Question

在vue.js（1.0.26）应用程序中，使用webpack（1.13.1）和vue-loader（8.5.3）构建，导入仅仅是svg一部分的组件时出现问题。

父组件：

<template>
    <svg viewBox="0 0 1280 512">
        <axis-x></axis-x>
    </svg>
</template>

<script>
import axisX from './axis-x.vue';

export default {
    components: {
        axisX
    }
}
</script>

子组件：

<template>
    <g>
        <line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" />
        <text x="16" y="414" fill="black">1990</text>
    </g>
</template>

<script>
export default {
};
</script>

当webpack运行时，会出现以下错误：

ERROR in ./src/axis-x.vue
  2 |   <g>
  3 |   <line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" />
    |   ^
  4 |   <text x="16" y="414" fill="black">1990</text>

Invalid self-closing tag: <line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" />. 
This will be treated as the starting tag only in HTML5. Use <line></line> instead.

看起来加载器将svg部分解释为无效的HTML。

如何解决此问题？感谢

Answer 1

此警告来自vue-template-validator。不幸的是它没有配置选项。

我不确定，但似乎只需将lang="html"属性添加到template元素即可将其关闭（vue-loader仅在没有lang时使用它}属性已指定）。在这种情况下，vue-loader将使用html-loader而不进行验证。

Answer 2

克隆你的应用程序并运行它后给了我同样的错误，很明显你可以在html5中自行关闭行标记，所以只需使用

<line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" ></line>

解决了问题

svg中的自关闭标签无效

2 个答案: