脚本宝典收集整理的这篇文章主要介绍了vue怎么读取文件内容，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue读取文件内容的方法：1、创建一个test.PRoPErties测试内容；2、通过“readTestFile(){const file = this.loaDFile('test.properties')...}”方法读取文件内容即可。

本文操作环境：windows7系统、vue/cli 4.3.1&&ultiMATE 2019.1&&nodev12.16.2版，DELL G3电脑。

观前提示：

本文所使用的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)}

相关推荐：《vue.js教程》

以上就是vue怎么读取文件内容的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的vue怎么读取文件内容全部内容，希望文章能够帮你解决vue怎么读取文件内容所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。