vue打开本地txt文件

Vue本身并不能直接打开本地txt文件，因为浏览器出于安全考虑，限制了JavaScript对本地计算机文件系统的访问权限。但是我们可以通过一些方法来实现：

1. 使用input元素的type=file属性，让用户选择本地文件，然后通过FileReader对象读取文件内容。示例代码：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <pre>{{ fileContent }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileContent: ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = () => {
        this.fileContent = reader.result
      }
      reader.readAsText(file)
    }
  }
}
</script>

2. 在Vue项目中使用Node.js的fs模块（前提是你的Vue项目是基于Node.js环境运行的），通过fs.readFile方法读取本地文件内容。示例代码：

<template>
  <div>
    <button @click="readFile">读取文件</button>
    <pre>{{ fileContent }}</pre>
  </div>
</template>

<script>
const fs = require('fs')

export default {
  data() {
    return {
      fileContent: ''
    }
  },
  methods: {
    readFile() {
      fs.readFile('path/to/file.txt', 'utf8', (err, data) => {
        if (err) {
          console.error(err)
        } else {
          this.fileContent = data
        }
      })
    }
  }
}
</script>