vue-cli 4.0 打包后图片报错

2023-09-15 23:40:20

vue-cli 4.0 打包后图片报错

    • BUG
        • vue 项目完成后，在本地运行静态资源加载无异常，打包到服务器后，报错404，提示图片加载失败
    • 分析
        • 比较可知，打包后，我的图片地址中少了`/syt/dist`
    • 解决
        • 解决问题的关键在 `publicPath: '/syt/dist/'` 这句代码
    • 小结

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，采用独立样式文件载入，不采用