vue@cli3使用絕對路徑引入public目錄下的靜態文件

 

官網地址：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#url-%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99

最近學習vue3，在封裝圖片時需要傳入路徑，相對路徑太麻煩，絕對路徑報錯，在官網看到這個特記錄一下

 

<template>
  <div class="trait">
    <img :src="`${publicPath + sonUrl}`"/>
    {{sonUrl}}
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: {
    sonUrl: String,
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
    };
  },
});
</script>