React + Webpack 字符编码问题

Question

我目前正在使用ReactJS和webpack构建网站。

我的文本编辑器设置为ISO-8859-15编码，并且我正在使用带有重音符号或特殊字符的字母，例如é è à ç。

在我的HTML页面中，我相信我正在使用正确的配置：

<meta charset="iso-8859-15">

但是特殊字符没有正确地呈现： Fran�ais 而不是 Français。

我尝试设置 charset="utf-8"，但没有任何改变。

我觉得 webpack 使用了 UTF-8 编码进行构建，这破坏了我的字符。该如何解决这个问题？

- pistou

Answer 1

我没找到一种方法让webpack读取除UTF-8以外的编码格式的输入文件。我不得不设置项目，将源文件写入UTF-8，并使用webpack-encoding-plugin将输出文件转换为ISO-8859-1或其他格式。这样做有效了。

- Sérgio Siegrist

---

我确认这是迄今为止我找到的唯一解决方案。对于使用Visual Studio的人来说，以下是如何将文件保存为UTF-8的方法：https://msdn.microsoft.com/zh-cn/library/dxfdkfke.aspx - Max Favilli

这个解决方案适用于将重音字符转换为utf-8源代码。但是，如果React从ISO-8859-1的rest服务中呈现数据，则重音字符仍然会出错。 - Emanuele Pavanello

Answer 2

为了解决与非 utf-8 端点的获取问题，这是解决方案：

fetch(url)
    .then(response => response.arrayBuffer())
    .then(buffer => {
      let decoder = new TextDecoder('iso-8859-1');
      return decoder.decode(buffer);
    })
    .then(res => JSON.parse(res))

- Emanuele Pavanello

Answer 3

我通过将.js文件编码格式更改为UTF8来解决了这个问题。我只需使用Notepad ++打开文件，然后执行以下操作：格式 -> 转换为UTF8。

- Rafael Vaz de Lima