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

一、导火索:

连体字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/... 这种方式会产生路径问题