Vite服务端iso-8859-15编码渲染异常问题求助

问题原因 #

1. Vite默认以UTF-8编码读取和处理所有文件，包括index.html——即使你在meta标签里声明了ISO-8859-15，Vite仍会把文件内容转成UTF-8输出，导致编码不匹配引发乱码。
2. Vite开发服务器基于Node.js HTTP服务，默认发送Content-Type: text/html; charset=utf-8响应头，直接覆盖HTML中的meta编码声明，浏览器最终用UTF-8解析内容。

解决方案 #

1. 确保所有文件实际编码为ISO-8859-15 #

• 在VS Code中打开HTML、JS、CSS文件后，点击右下角的编码标识（如「UTF-8」），选择通过编码保存，再选择「ISO-8859-15」，确保所有文件都以该编码存储。

2. 修改Vite配置强制使用目标编码 #

在项目根目录创建/修改vite.config.js，添加以下配置：

import { defineConfig } from 'vite';

export default defineConfig({
  // 开发服务器：覆盖响应头编码
  server: {
    headers: {
      'Content-Type': 'text/html; charset=iso-8859-15'
    }
  },
  // 构建阶段：禁用Rollup的UTF-8强制声明
  build: {
    rollupOptions: {
      output: {
        charset: false, // 阻止Rollup自动添加UTF-8编码声明
      }
    }
  },
  // 自定义插件：确保文件以ISO-8859-15编码处理
  plugins: [
    {
      name: 'iso-8859-15-encoder',
      // 处理index.html输出
      transformIndexHtml(html) {
        return html;
      },
      // 确保读取JS/CSS文件时保留原编码
      async transform(code, id) {
        if (id.match(/\.(html|js|css)$/)) {
          return { code, map: null };
        }
      }
    }
  ]
});

3. 验证结果 #

• 开发模式启动后，打开浏览器开发者工具→网络→查看index.html的响应头，确认Content-Type包含charset=iso-8859-15。
• 构建完成后，用文本编辑器打开dist/index.html，检查文件编码是否为ISO-8859-15，且特殊字符显示正常。

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