1

webpack (1.13.1) と vue-loader (8.5.3) でビルドされた vue.js (1.0.26) アプリでは、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 として解釈しているようです。

この問題を解決するにはどうすればよいですか? ありがとう

4

2 に答える 2

0

この警告は から来ていvue-template-validatorます。残念ながら、構成オプションはありません。

よくわかりませんが、要素lang="html"に属性を追加するだけでオフにできるようです（属性が指定されていない場合にのみ使用します）。その場合、検証なしで使用します。templatevue-loaderlangvue-loaderhtml-loader

于 2016-08-18T21:45:44.270 に答える
0

アプリケーションのクローンを作成して実行すると、同じエラーが発生し、html5 で行タグを自己終了できることは明らかだったので、使用するだけで

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

問題を解決しました

于 2016-08-18T21:53:40.203 に答える