Vue.js中如何将本地文本/Markdown文件的词汇读取为数组且不引入额外依赖

错误原因 #

fs是Node.js专属的服务端API，Vue代码最终运行在浏览器环境，浏览器原生没有fs模块和require方法，因此原有代码直接报错，该思路不适用前端场景。

解决方案（无额外依赖） #

以下两种方案均不需要引入任何第三方库、插件，适配所有Vue官方脚手架环境。

方案1：直接导入TXT文本文件（推荐，保留原有txt文件格式）

目前Vite、Vue CLI 3+都原生支持纯文本资源导入，无需额外配置：

1. 保持你的MyDataSet.txt存放在src目录下，和App.vue同级
2. 在App.vue中按如下方式导入处理：

<template>
    ...
</template>
<script>
import { computed, ref } from 'vue'
import SomeStuff from './components/SomeStuff'
// 导入txt纯文本内容，?raw是脚手架原生支持的导入后缀，无额外依赖
import rawText from './MyDataSet.txt?raw'

// 文本转数组，自动过滤空行
const words = rawText.split('\n').filter(item => item.trim())
// 随机取词逻辑不变
const randomWord = () => words[Math.floor(Math.random() * words.length)];

export default {
    components: { SomeStuff },
    setup() {
        // 业务逻辑...
        return {
            randomWord
        }
    }
}
</script>

方案2：用JS文件存储词汇（兼容性最强，适配所有构建环境）

如果你的脚手架版本过旧不支持?raw导入，可以直接把词汇放在JS文件里导出：

1. 在src目录新建words.js，内容如下：

export default [
  'Test1',
  'Test2',
  'Test3',
  'Test4'
]

2. 在App.vue中直接导入即可：

import words from './words.js'

内容的提问来源于stack exchange，提问作者41 72 6c