首页 > Web开发 > 详细

vue2.x webpack打包资源路径问题

时间:2020-05-16 09:27:41      阅读:126      评论:0      收藏:0      [点我收藏+]

一、导火索:

连体字ligature

二、环境:

vue-cli 2.x, webpack模板

三、目录结构:

技术分享图片
说明: 相对路径含有assets的资源会被webpack打包, static文件夹下不会被打包
assets文件夹用相对引用, static文件夹用绝对引用, 把资源放在assets文件夹下, 通过相对引用方式引用

四、关键配置文件:

1. config/index.js:

技术分享图片

2. build/utils.js:

技术分享图片

五、使用:

1. App.vue的css里面引用字体文件:

@font-face {     
  font-family: "JetBrains Mono"; 
    src: url("./assets/fonts/JetBrainsMono-Regular.woff"); 
}

2. 技术分享图片标签src引用图片:

<img src="../assets/img/snower.png" />

六、注意:

assets里面的资源一定要相对引用, /assets/... 这种方式会产生路径问题

vue2.x webpack打包资源路径问题

原文:https://www.cnblogs.com/xfk1999/p/12898210.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!