Vue.js应用中内联样式被移除，如何使其保留？

以下是几种可行的解决方案，按优先级排序：

1. 改用Vue动态样式绑定（最稳妥） #

将静态内联style替换为v-bind:style动态绑定，避免Vue编译器或压缩工具误判为无效样式：

<div 
  class="col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100" 
  :style="{ 'grid-template-rows': 'repeat(48, minmax(3.5rem, 1fr))' }"
>
<!-- 日历内容 -->
</div>

动态绑定的样式不会被生产环境的优化逻辑移除，能确保布局正常。

2. 禁用HTML压缩中的冗余属性移除 #

如果是生产环境下HTML压缩工具（如html-minifier-terser）移除了样式，可针对性关闭相关压缩选项：

针对Vite项目 #

修改vite.config.js的构建配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    html: {
      minify: {
        removeRedundantAttributes: false, // 关闭冗余属性移除
        removeOptionalTags: false
      }
    }
  }
})

针对Vue CLI项目 #

修改vue.config.js的webpack配置：

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].minify = {
        ...args[0].minify,
        removeRedundantAttributes: false,
        removeOptionalTags: false
      }
      return args
    })
  }
}

3. 排查第三方插件干扰 #

如果上述方法无效，检查项目中是否使用了purgecss-html或其他HTML处理插件，这类工具可能会误删内联样式。可暂时禁用插件测试，确认后调整插件的白名单规则。

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