vue-cli 4.0 打包后图片报错

BUG

vue 项目完成后,在本地运行静态资源加载无异常,打包到服务器后,报错404,提示图片加载失败

报错

分析

已确定(对比后端静态资源目录结构):

  • 图片请求地址错误(地址对应的地方无图片)
  • 我的(错误)地址:http://w**h.y***8.com/static/img/logo.png
  • 正 确 的 图片地址:http://w**h.y***8.com/syt/dist/static/img/logo.png
    对比
比较可知,打包后,我的图片地址中少了/syt/dist

解决

由于我的脚手架是 4.* 版本的 : @vue/cli 4.4.6 。项目中只有 vue.config.js,没有百度中各位大神说的 build/build.js 和 build/utils.js 文件。因此我只能通过 vue.config.js 配置 webpack 打包。
在这里插入图片描述
我简略地配置了下 vue.config.js 文件,

解决问题的关键在 publicPath: '/syt/dist/' 这句代码

在这里插入图片描述

我的 vue.config.js 文件完整代码:

// const path = require('path')
module.exports = {

  configureWebpack: {
    performance: {
      hints: false
    }
  },
  // publicPath: './', // vueConf.baseUrl, // 根域上下文目录(起初)
  publicPath: '/syt/dist/', // vueConf.baseUrl, // 根域上下文目录(我更改后)
  // outputDir: 'dist', // 构建输出目录
  // assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  lintOnSave: true, // 是否开启eslint保存检测,有效值:ture | false | 'error'
  // runtimeCompiler: true, // 运行时版本是否需要编译
  transpileDependencies: [], // 默认babel-loader忽略mode_modules,这里可增加例外的依赖包名
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度
  css: {
    // 配置高于chainWebpack中关于css loader的配置
    // modules: true, // 是否开启支持‘foo.module.css’样式
    // extract: true, // 是否使用css分离插件 ExtractTextPlugin,采用独立样式文件载入,不采用<style>方式内联至html文件中
    // sourceMap: false, // 是否在构建样式地图,false将提高构建速度
    loaderOptions: { // css预设器配置项
      // less: {
      //   loaderOptions: {
      //   data: `@import "@/assets/less/global.less";`
      //   }
      // }
    }
  },
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  // pluginOptions: {
  //   'style-resources-loader': {
  //     preProcessor: 'less',
  //     patterns: [path.resolve(__dirname, './src/assets/less/global.less')]
  //   }
  // },
  pwa: {
    // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, {
        limit: 2
      }))
  },
  //   devServer: {
  //     open: true,
  //     host: '0.0.0.0',
  //     port: 8081,
  //     https: false,
  //     hotOnly: false,
  //     // proxy: null
  //     proxy: {
  //       '/api': {
  //         target: '',//请求地址
  //         ws: true,
  //         changeOrigin: true,
  //         pathRewrite: {
  //           '^/api': '' //请求地址
  // } } } // before: app => {} 
  // }
}

小结

如果你发现打包后图片资源无法正常显示,且已知晓正确的图片地址,根据地址修改 vue.config.js 文件中的 publicPath 即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值