vue3标题出现乱码

开头解决方案

在Vue3项目中遇到标题乱码问题时，需要检查的是编码设置。通常情况下，确保文件以UTF-8编码保存，并且在HTML头部正确声明字符集可以有效解决大多数乱码问题。还需检查数据源的编码格式是否一致，以及是否存在转义字符处理不当的情况。

一、确保正确的编码设置

HTML文件头部声明字符集
在项目的public/index.html文件中，确保有以下声明：
html <head> <meta charset="UTF-8"> </head>
这个声明告诉浏览器使用UTF-8编码来解析页面内容。
代码文件保存为UTF-8编码
检查你的IDE或文本编辑器，确保所有.vue、.js等文件都以UTF-8编码保存。例如，在VSCode中，可以通过右下角的编码标识进行切换。

二、检查数据源编码

如果标题是从后端API获取的数据，那么需要确认后端返回的数据也是UTF-8编码。可以通过浏览器开发者工具的网络请求面板查看响应头中的Content-Type字段，确保包含charset=UTF-8。如果不一致，可以在后端配置中进行调整。

三、处理转义字符

有时候从数据库或其他来源获取的字符串可能包含特殊字符或转义序列，这可能会导致显示异常。假设我们有一个组件从props接收

javascript
// MyComponent.vue

  <h1>{{ decodedTitle }}</h1>
</p>


import { computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  }
});

// 使用decodeURIComponent解码URL编码的字符串
const decodedTitle = computed(() => decodeURIComponent(props.title));


<p>

上述代码展示了如何对可能被URL编码过的标题进行解码，从而避免乱码。