Vue 3中如何匯入svg檔?
P粉021854777
P粉021854777 2023-08-23 08:37:27
0
2
759
<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>
P粉021854777
P粉021854777

全部回覆(2)
P粉676588738

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>`;
};
P粉587970021

實際上,Vue CLI已經原生支援SVG。它內部使用file-loader。您可以透過在終端機上執行以下命令來確認:

vue inspect --rules

如果「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;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板