Vue打包后静态资源图片失效彻底解决的终极指南

GET https://example.com/static/img/logo.56432.png 404 (Not Found)
Failed to load resource: the server responded with a status of 404

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/production-sub-path/' 
    : '/'
}

// 根据部署环境自动识别
const publicPathMap = {
  development: '/',
  test: 'https://test-cdn.example.com/',
  production: 'https://prod-cdn.example.com/'
}

module.exports = {
  publicPath: publicPathMap[process.env.VUE_APP_ENV]
}

<!-- 模板中引用 -->
<img :src="require('@/assets/logo.png')">

<!-- JS中引用 -->
<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/banner.jpg')
    }
  }
}
</script>

<!-- 使用绝对路径 -->
<img src="/img/logo.png">

<!-- 动态路径拼接 -->
<img :src="`${publicPath}img/logo.png`">

<script>
export default {
  computed: {
    publicPath() {
      return process.env.BASE_URL
    }
  }
}
</script>

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => ({
        ...options,
        name: 'img/[name].[hash:8].[ext]',
        outputPath: 'custom-img/',
        publicPath: process.env.NODE_ENV === 'production'
          ? 'https://cdn.example.com/custom-img/'
          : '/custom-img/'
      }))
  }
}

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

location / {
  try_files $uri $uri/ /index.html;
  
  # 静态资源缓存
  location ~* \.(png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public";
  }
}

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

# 安装分析插件
npm install -g source-map-explorer

# 生成分析报告
source-map-explorer dist/js/*.js

// 打印最终路径
console.log('Image path:', require('@/assets/logo.png'))

// 查看 process.env 变量
console.log('BASE_URL:', process.env.BASE_URL)

// vue.config.js
module.exports = {
  publicPath: 'https://cdn.example.com/project-name/',
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.output
        .filename('js/[name].[contenthash:8].js')
        .chunkFilename('js/[name].[contenthash:8].js')
    }
  }
}

# .env.staging
NODE_ENV=production
VUE_APP_ENV=staging
PUBLIC_URL=https://staging.example.com/

// vue.config.js
const env = process.env.VUE_APP_ENV

module.exports = {
  publicPath: {
    staging: 'https://staging.example.com/',
    production: 'https://prod.example.com/'
  }[env]
}

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true },
        optipng: { enabled: false },
        pngquant: { quality: [0.65, 0.90] },
        webp: { quality: 75 }
      })
  }
}

<template>
  <picture>
    <source 
      :srcset="require('@/assets/hero.jpg?webp')" 
      type="image/webp">
    <source
      :srcset="require('@/assets/hero.jpg')"
      type="image/jpeg">
    <img 
      :src="require('@/assets/hero.jpg')" 
      alt="Hero Image">
  </picture>
</template>

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
      .use('url-loader')
      .tap(options => ({
        ...options,
        publicPath: process.env.NODE_ENV === 'production'
          ? '../' 
          : '/'
      }))
  }
}