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/img@2x.c634efc.png 所以跳出两层../../； 注意配置这一部分，根据目录结构自由调整
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

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

三、部分图片无法正确访问到路径

打包之后，点击 index.html 文件，有部分本地图片无法访问。

<img src="../../../../static/images/NORMAL.png">

打包之后，在F12下，查看应该为base64位字节码：

<img data-v-5ed6d1d8="" src="https://img-blog.csdnimg.cn/2022010619232660168.png">

对于部分打包不了，最初以为这是因为图片过大的问题，我把图片缩小依然不能解决。

然而通过npm run build -> cd dist -> http-server，开启本地服务之后，再次访问，可以查看到本地图片。