乘风原创程序

  • Vue项目build后,图片加载不出来的解决
  • 2022/3/26 12:42:56
  • vue项目build图片加载不出来

    vue项目,build之后会对图片进行处理,具体处理的方式是在文件webpack.base.conf.js中,有如下代码:

    module: {
    ? ? rules: [
    ? ? ?{
    ? ? ? ? test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    ? ? ? ? loader: 'url-loader',
    ? ? ? ? options: {
    ? ? ? ? ? limit: 10000, // 1k-----限制文件的大小
    ? ? ? ? ? name: utils.assetspath('img/[name].[hash:7].[ext]')
    ? ? ? ? }
    ? ? ?}
    ? ? ]
    }

    以上代码中,使用url-loader对图片的大小进行限制,在limit之内,webpack会将图片转化为base64,超出limit限制,交给file-loader处理。

    如果在limit范围之内,不会出现图片加载不出来的情况;

    超出limit,webpack会将处理后的图片放在dist/static/img/中,此时加载图片将会显示不出来。具体做法如下:

    1.在config/index.js文件内

    修改代码: (列出index.js的部分代码)

    build: {
    ? ? // template for index.html
    ? ? index: path.resolve(__dirname, '../dist/index.html'),
    ?
    ? ? // paths
    ? ? assetsroot: path.resolve(__dirname, '../dist'),
    ? ? assetssubdirectory: 'static',
    ? ? assetspublicpath: './',?
    }

    assetspublicpath字段值由之前的'/'改为'./';

    2.在webpack.prod.conf.js文件内

    output字段,添加代码(publicpath: './'):

    output: {
    ? ? publicpath: './', // 添加的代码
    ? ? path: config.build.assetsroot,
    ? ? filename: utils.assetspath('js/[name].[chunkhash].js'),
    ? ? chunkfilename: utils.assetspath('js/[id].[chunkhash].js')
    ? },

    3.在utils.js文件里添加 publicpath:'../../'

    代码如下:

    // (which is the case during production build)
    if (options.extract) {
    ? return extracttextplugin.extract({
    ? ? use: loaders,
    ? ? fallback: 'vue-style-loader',
    ? ? publicpath: '../../' ?// 添加的代码
    ? })
    } else {
    ? return ['vue-style-loader'].concat(loaders)
    }

    以上步骤操作完后,执行命令:npm run build

    在build后,dist中的index.html页面的link、script标签的引入路径变为相对路径;同时,相关的图片路径,也变变为相对路径,此时部署项目,不再出现图片路径404。

    vue项目打包后部分图片不显示

    1.图片的后缀名不能含ad字母敏感词(即谷歌会认为是广告,并自动删除)

    2.图片本身(质量)的原因,跟前端无关,需让ui给新的设计图片。--备注:qq直接截图到本地的图片打包后可能也不显示,需跟ui要原始设计图。

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。