Vue中引入路径（图片、iframe）的几种方式

1、在template的img中直接引入相对路径

<img src="../../static/img/car.png" />

这种引入会被webpack处理（有些处理为base64，有些给图片加hash修改图片名字），总之不需要担心打包后的图片路径问题

2、使用v-bind绑定src路径，不会被webpack处理，因此需要使用require手动引入

<img :src="require('../static/img/03.jpg')" alt=""> 
<img :src="img3Src" alt=""> 
<img :src="require('../static/img/'+ this.imgName +'.jpg')" alt=""> 

<script>
export default:{
    data(){
        return {
          imgName:'03',
          img3Src:require('../static/img/03.jpg')
        }
      },
}
</script>

3、在script中的方法中要引入图片时，直接根据打包后的相对路径引入(./static/img/图片)，或使用require引入

以高德地图，标记点为例

mapMarker(){
   var marker = new AMap.Marker({
     //icon:require("../../static/img/1.png"),   // 这种会被webpack编译
       icon:"./static/img/1.png",      // 这种不会被webpack编译
       position: item.lonlat,
       angle:item.angle,
       offset: new AMap.Pixel(-7, -7)
   });
   marker.setMap(this.map);

   marker.on('click',function(e){
     me.infoWindowDom = new AMap.InfoWindow({
       //要显示的内容
       content: `<div class="box_border_kuang">
           <img src="./static/img/highway/person.png" style="width:100%;"  /> 
        </div>`,
   })
 })
}     

4、引入iframe，打包后文件不在根目录引起的iframe路径问题，在这里引入时，直接使用编译或打包后的路径即可(./static/iframe/index.html)

<template>
     //iframe引入路径，不会被webpack所编译，所以直接引入打包/编译后的相对的文件路径即可
      <iframe src="./static/iframe/index.html" ></iframe>   
</template>

最后

• 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

• 打包后的文件未被部署到根目录下时引起的路径问题：
  publicPath这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

参考链接：https://cli.vuejs.org/zh/config/#publicpath

参考链接：https://blog.csdn.net/sunhonghui9527/article/details/107188395/