VUE无法显示中文，UTF-8设置无效该如何解决？

问题背景 #

已在index.html中设置UTF-8编码：

执行npm run dev启动Web应用：

但浏览器仍显示乱码：

常见原因及对应解决方法 #

1. 确认index.html编码声明的正确性 #

确保<head>内的meta编码标签无错误，且没有重复的编码声明：

<meta charset="UTF-8">

避免同时存在gbk、gb2312等其他编码的meta标签。

2. 统一项目源码文件的编码格式 #

所有.vue、.js、.css等源码文件，保存时需选择UTF-8编码。主流编辑器可设置默认编码：

• VS Code：点击右下角编码选项，选择"UTF-8"后保存文件
• WebStorm：在设置中搜索"File Encodings"，将全局、项目、文件编码均设为UTF-8

3. 配置Webpack的编码处理逻辑 #

针对Vue CLI构建的项目，调整Webpack配置确保文件编码正确处理：

Vue CLI 2 项目（修改webpack.base.conf.js）

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          encoding: 'utf-8'
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          encoding: 'utf-8'
        }
      }
    ]
  }
}

Vue CLI 3+ 项目（修改vue.config.js）

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            encoding: 'utf-8'
          }
        }
      ]
    }
  }
}

4. 修正DevServer的响应头编码 #

检查浏览器Network面板中页面请求的响应头，确认Content-Type包含charset=utf-8。若缺失，在DevServer配置中添加：

// Vue CLI 2 编辑webpack.dev.conf.js，Vue CLI 3+ 编辑vue.config.js
module.exports = {
  devServer: {
    headers: {
      'Content-Type': 'text/html; charset=utf-8'
    }
  }
}

5. 强制清除浏览器缓存 #

浏览器缓存的旧资源可能导致编码异常，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后重新加载。

6. 排查第三方资源编码问题 #

若引入了第三方UI库或插件，确认其资源文件编码为UTF-8，避免因外部资源编码不一致引发乱码。

内容的提问来源于stack exchange，提问作者Anéeka