Vue项目本地资源路径问题

使用vue-cli进行开发了一段时间，但是难免还是遇到一些问题，这其中也包括了对webpack的不求甚解(下个目标搞定webpack)。此文章先对遇到的Vue项目本地资源路径问题做一个简单的记录。

1.直接引入图片

无论图片是放在static文件夹、assets文件夹或者是自己在src下新建的文件夹，图片路径和背景图路径均使用相对路径。
另外简单说下static和assets的区别：两者都是存放项目的静态文件资源js/css/img…。static文件加下的资源项目打包的时候不会被webpack处理只是简单的拷贝，所以一般将第三方的资源放在这里比如swiper,加快打包的速度。assets文件下的资源会被webpack进行处理比如压缩混淆添加hash等，所以一般将项目本身的资源放在该文件下。

2.动态绑定一组本地图片

将图片当成模块先引进来，再绑定


虽然这种方式可以实现，但是写起来麻烦，比较懒。

3.给资源路径设置alias

在引入资源时使用，别名alias，vue init webpack生成的项目在build/webpack.base.conf.js文件中进行更改

1
2
3
4
5
6
7
8
9
10
11

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@a': resolve('src/assets'),
      '@c': resolve('src/components'),
      '@p': resolve('src/page'),
      '@s': resolve('src/service'),
    }
}

1
2
3
4

之后项目中就可以使用了 
<img src="~@a/images/[图片名]"> // images: src/assets 下存放图片的文件夹 
backgroud: url(~@a/images/[图片名]) 
js中 直接用 @a/...，不需要加 ~