vue2.x图片引用报错,打包后页面静态文件引用报错

hash模式

• 组件中img标签中图片引用src="@/assets/images/a.png"

history模式

1. 图片报错index.html/xxx/img/a.png，图片放在在assets中

• 解决方法：
• build下的base.conf中的url-loader中的limit(默认是10000byte（字节）
• 10kb以下都进行base64编码
• 将limit的值多加几个0，图片就可以转化为base64,但是文件变得很大。

2. 图片404：

• 将图片放在static中，img、url（）中引用相对路径（../../static）
• 打包后url中的图片404，将build中utils中修改为如下即可

return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })

3. 图片404：图片在assets中。

• 解决方法：
• img用相对路径即可。
• 对于背景图片，data中定义：url1: 'url(' + require('../assets/activityImg.png') + ')'
• 标签中:style="{backgroundImage: url1}"即可，文件不增大。

4. img使用相对路径即可， 背景图片（background-image）不显示，图片在assets文件夹中，解决方法：将build下的utils中修改如下：（推荐的方式）

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })

vue打包后页面静态文件引用报错（hash和history）

配置文件中config下的index.js下的build中设置assetsPublicPath: ./（相对路径）