Vue项目读取本地文件

最新推荐文章于 2025-04-09 16:48:52 发布

原创最新推荐文章于 2025-04-09 16:48:52 发布

· 2.2w 阅读

22 ·

版权

文章标签：

#vue #读取本地文件 #unicode转utf-8

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue项目中如何读取本地文件，特别是在使用IDEA 2019.1、Node v12.16.2和Vue CLI 4.3.1的环境下。在读取本地public文件夹中的test.properties文件时，可能会遇到文件乱码和读取到的中文为Unicode编码的问题。对于乱码问题，建议将文件保存为UTF-8编码；对于Unicode编码问题，可以在前端或后台进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

观前提示：

本文所使用的IDEA版本为ultimate 2019.1，node版本为v12.16.2，vue版本为@vue/cli 4.3.1。

在项目开发过程中，需要在vue前端读取配置等文件。

1.实例

我的本地文件放在vue项目中的public文件夹中

在这里插入图片描述

test.properties

content=测试内容

vue文件中读取文件内容

// 读取test.properties
readTestFile() {
  const file = this.loadFile('test.properties')
  console.info(file)
  console.log(this.unicodeToUtf8(file))
},
// 读取文件
loadFile(name) {
  const xhr = new XMLHttpRequest()
  const okStatus = document.location.protocol === 'file:' ? 0 : 200
  xhr.open('GET', name, false)
  xhr.overrideMimeType('text/html;charset=utf-8')// 默认为utf-8
  xhr.send(null)
  return xhr.status === okStatus ? xhr.responseText : null
},
// unicode转utf-8
unicodeToUtf8(data) {
  data = data.replace(/\\/g, '%')
  return unescape(data)
}

运行结果如下
在这里插入图片描述

2.可能遇到的问题

2.1.解析的文件乱码

读取文件的方法，以utf-8形式读取文件，建议修改文件格式保存为utf-8编码，或者改变读取格式

xhr.overrideMimeType('text/html;charset=utf-8')// 默认为utf-8

2.2.读取中文为unicode编码

由于properties存储中文为unicode编码，需要在后台，或者前端处理一下

// unicode转utf-8
unicodeToUtf8(data) {
  data = data.replace(/\\/g, '%')
  return unescape(data)
}