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 即可。