vue build打包时img、背景图、和外部字体库相关问题

一、关于npm run build 打包时img图片不加载的问题

在config 文件夹下的 index.js中修改配置

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',//将原来的'/'修改为'./'
}

关于是否将图片转成base64格式的设置，相关配置 在build文件夹下的 webpack.base.conf.js

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,//单位为b  1024实际大小为1kb 超过1kb的图片将不进行base64转换
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
},

二、关于引入外部字体库和img图片的相关配置

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',         // 这里是/static/css/static/img/[email protected] 所以跳出两层../../； 注意配置这一部分，根据目录结构自由调整
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

加上  publicPath: '../../', 配置后重写打包即可。