Nuxt generate后图片与CSS动画失效问题求助（Nuxt 2.14.6）

我做了一个横幅，用标题搭配静态图片实现CSS动画效果，开发模式下动画正常运行，但执行nuxt generate生成静态文件后，图片和动画完全失效。以下是相关代码和配置，我是Nuxt新手，求所有可行解决方案。

相关CSS代码 #

.strike { position:relative; }
.strike::after {
  content:' ';
  position:absolute;
  top:84%; left:-1%;
  width:0; height:36px;
  opacity:100%;
  transform:translateY(-50%);
  background:repeat-x url("/images/strikethrough.png");
  animation: strike 1s linear .3s 1 forwards;
}
@keyframes strike {
  to { width: 9%; }
}

注：该CSS对static文件夹下的/images/strikethrough.png图片执行动画。

HTML代码（strike类使用） #

<h1 class="font-bold text-28 md:text-3xl lg:text-42 strike">
   {{ title }}
</h1>

nuxt.config.js配置 #

import { I18N } from './config/i18n'
const path = require('path')

export default {
  // Disable server-side rendering
  ssr: false,
  target: 'static',

  generate: {
    fallback: true
  },

  env: {
    base: process.env.base,
    title: process.env.title,
    desc: process.env.desc,
    logo: process.env.logo,
    google_analytics_id: process.env.google_analytics_id
  },

  // Global page headers
  head: {
    title: 'website',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'website: Solution' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600;1,700&display=swap' }
    ]
  },

  /* nuxt.js Router */
  router: {
    middleware: ['show_link_contact']
  },

  // Global CSS
  css: [
    '~assets/styles/tailwind.css'
  ],

  loading: {
    color: '#417AC9',
    height: '5px'
  },

  // Plugins to run before rendering page
  plugins: [
    { src: '~plugins/vuespinner.js' },
    { src: '~plugins/vuelazyload.js' },
    // { src: "~plugins/crisp.js", mode: "client" },
    // Mixins
    { src: '~mixins/global.js' },
    // Models
    '~/models/news',
    '~/models/gallery',
    '~/models/clients',
    '~/models/career',
    '~/models/contact'
  ],

  // Auto import components
  components: true,

  // Modules for dev and build
  buildModules: [
    '@nuxtjs/eslint-module'

  ],

  // Modules
  modules: [
    '@nuxtjs/axios',
    'nuxt-purgecss',
    ['nuxt-i18n', I18N],
    'vue-social-sharing/nuxt'
  ],

  purgeCSS: {
    mode: 'postcss',
    enabled: (process.env.NODE_ENV === 'production'),
    whitelist: [
      'slick-',
      'career__jobdesk',
      'client__',
      'form__',
      'home-',
      'card-product',
      'grid__excellence',
      'btn__jobdesk',
      'popup__gallery',
      'leaflet-',
      'gallery',
      'v-bounce'
    ],
    whitelistPatterns: [
      /^slick-/, /^career__jobdesk/, /^client__/, /^form__/, /^home-/, /^card-product/, /^grid__excellence/, /^btn__jobdesk/, /^popup__gallery/,
      /^leaflet-/, /^gallery/, /^v-bounce/
    ]
  },

  // Axios module configuration
  axios: {},

  // Build Configuration
  build: {
    postcss: {
      plugins: {
        'postcss-import': {},
        tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
        'postcss-nested': {}
      }
    },
    preset: {
      stage: 1
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          tailwindConfig: {
            test: /tailwind\.config/,
            chunks: 'all',
            priority: 10,
            name: true
          }
        }
      }
    }
  }
  
}

可行解决方案 #

1. 修复PurgeCSS的白名单配置 #

生产环境下PurgeCSS会自动移除未被识别的CSS规则，你的strike类和strike动画关键帧没在白名单里，导致被删除。修改nuxt.config.js里的purgeCSS配置：

purgeCSS: {
  // ...保留原有配置
  whitelist: [
    // ...原有白名单项
    'strike'
  ],
  whitelistPatterns: [
    // ...原有正则
    /^strike$/
  ]
}

添加后PurgeCSS就不会清除.strike类和@keyframes strike规则了。

2. 调整背景图路径 #

静态生成后，绝对路径可能存在访问问题，尝试用Nuxt的别名引用静态资源：

background: repeat-x url("~static/images/strikethrough.png");

同时确认static/images/strikethrough.png在生成后确实被复制到了dist/images目录下。

3. 强制元素在客户端渲染 #

虽然你设置了ssr: false，但静态生成时可能还是会提前处理元素，用<client-only>标签包裹目标元素，确保只在客户端渲染：

<client-only>
  <h1 class="font-bold text-28 md:text-3xl lg:text-42 strike">
    {{ title }}
  </h1>
</client-only>

4. 防止CSS压缩工具移除关键帧 #

如果使用了cssnano等压缩工具，它可能会移除未被识别的动画关键帧，在build配置里调整压缩选项：

build: {
  // ...保留原有配置
  cssMinifierOptions: {
    preset: ['default', {
      discardUnused: false,
      mergeIdents: false,
      reduceIdents: false
    }]
  }
}

5. 验证生成后的文件结构 #

执行nuxt generate后，检查dist目录：

• 确认dist/images/strikethrough.png存在
• 打开生成的CSS文件，搜索.strike和@keyframes strike，如果不存在，说明还是被PurgeCSS或压缩工具删除了，回到方案1重新调整白名单。

内容的提问来源于stack exchange，提问作者1988