前言

在日常开发的过程中，有部分内容（文本内容/json数据/其他格式的文件）是写死的，这部分内容需要按文件内容的格式直接展示，转换到前端页面就是一个html元素，如果要处理换行得一行一行的处理，这里给大家提供一个一劳永逸的方式，无论你是json数据还是sql文件，文件内容是什么就可以直接获取到。

下面以一个yaml格式的文件举例，读取到文件内容，并把这个文件内容展示到一个容器里。

方法1：使用XMLHttpRequest读取本地文件

readFile 方法接收一个文件路径，如果你是vue 项目，则需要把文件放在public目录下，因为打包部署之后这个文件仍会保留在该目录下，使用方法如下：

<script lang="ts" setup>
  const yamlDemo = ref('sss')

  const readFile = (filePath: string) => {
    // 创建一个新的xhr对象
    let xhr = null
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      // eslint-disable-next-line
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    const okStatus = document.location.protocol === 'file' ? 0 : 200
    xhr.open('GET', filePath, false)
    xhr.overrideMimeType('text/html;charset=utf-8')
    xhr.send(null)
    return xhr.status === okStatus ? xhr.responseText : null
  }
  onMounted(() => {
    yamlDemo.value = readFile('/demo.yml')
  })
</script>

方法2：使用axios 读取本地文件

原理一样，只是借助了axios，axios内部对XMLHttpRequest进行了封装集成，文件路径仍需要放到指定位置，保证打包之后不被编译仍能找到文件。

import axios from 'axios'

const yamlDemo = ref('sss')

const readFile = (filePath: string) => {
  axios.get(filePath).then((data:string)=>{
    yamlRef.value.setValue(data)
  }) 
}
onMounted(() => {
  yamlDemo.value = readFile('/demo.yml')
})