Vue 3中如何匯入svg檔？
P粉021854777
2023-08-23 08:37:27
<p>我試了以下內容：<br /> <a href="https://github.com/visualfanatic/vue-svg-loader/tree/master">https://github. com/visualfanatic/vue-svg-loader/tree/master</a></p>
<p>但是由於Vue 2中使用了vue-template-compiler，所以有版本衝突。 </p>
<p>我試了：<br /> <a href="https://github.com/visualfanatic/vue-svg-loader">https://github.com/visualfanatic/vue- svg-loader</a></p>
<p>但是我缺少特定的Vue依賴項。 </p>
<p>我注意到在使用TypeScript時有一個注意事項，需要聲明類型定義檔。然而，我仍然得到了“無法找到模組'../../assets/myLogo.svg'或其對應的類型聲明”的錯誤。 </p>
<p>這是我加入的內容：</p>
<p>vue.config.js</p>
<pre class="brush:php;toolbar:false;">module.exports = {
chainWebpack: (config) =>
{
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-loader-v16')
.loader('vue-loader-v16')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
configureWebpack: process.env.NODE_ENV === 'production' ? {} : {
devtool: 'source-map'
},
publicPath: process.env.NODE_ENV === 'production' ?
'/PersonalWebsite/' : '/'
}</pre>
<p>shims-svg.d.ts</p>
<pre class="brush:php;toolbar:false;">declare module '*.svg' {
const content: any;
export default content;
}</pre>
<p>MyComponent.vue</p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<MyLogo />
</div>
</template>
<script lang="ts">
import * as MyLogo from "../../assets/myLogo.svg";
export default defineComponent({
name: "MyComponent",
components: {
MyLogo
},
props: {
},
setup(props)
{
return {
props
};
}
});
</script></pre>
<p><br /></p>
vue-svg-loader 不相容 vue 3。要導入 svg 並將其用作元件，只需將文件內容包裹在 'template' 中
在元件中：
<template> <div class="title"> <span>Lorem ipsum</span> <Icon /> </div> </template> <script> import Icon from '~/common/icons/icon.svg'; export default { name: 'PageTitle', components: { Icon }, }; </script>Webpack：
{ test: /\.svg$/, use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')], }scripts/svg-to-vue.js：
module.exports = function (source) { return `<template>\n${source}\n</template>`; };實際上，Vue CLI已經原生支援SVG。它內部使用file-loader。您可以透過在終端機上執行以下命令來確認：
如果「svg」被列出（應該會被列出），那麼您只需要：
<template> <div> <img :src="myLogoSrc" alt="my-logo" /> </div> </template> <script lang="ts"> // 请使用`@`来引用项目的根目录“src” import myLogoSrc from "@/assets/myLogo.svg"; export default defineComponent({ name: "MyComponent", setup() { return { myLogoSrc }; } }); </script>因此，如果您的目的只是顯示SVG，那麼不需要任何第三方程式庫。
當然，為了滿足TypeScript編譯器的型別宣告要求：
declare module '*.svg' { // 它实际上是一个字符串，精确地说是指向图像文件的解析路径 const filePath: string; export default filePath; }