如何在Vue Repl中导入本地Utils.js文件？咨询额外文档

模块熟悉度与文档情况 #

• 不少前端开发者熟悉Vue官方的Repl模块，它是官方在线Vue代码编辑预览工具的核心实现。
• 除仓库README外，暂无专门官方文档，可通过阅读源码注释、查看仓库Issues和Discussions了解细节，社区也有相关实践分享。

导入本地Utils.js到示例App.vue的实现方法 #

要让App.vue能导入并使用Utils.js，需在Repl的store中添加该文件，具体步骤如下：

1. Utils.js 内容 #

export const doSomething = () => {}

2. App.vue 代码（你的写法已正确） #

<script setup>
import * as Utils from './Utils.js'
Utils.doSomething('Hi');
</script>

3. 更新Repl.vue的store配置 #

需将Utils.js加入store的文件列表，修改后代码如下：

<script>
const store = new useStore({})
// 读取Utils.js的内容
const utilsFileContent = readFileAsStr('./Utils.js')

store.setFiles({
  ...store.getFiles(),
  'App.vue': readFileAsStr('./AppVue.text'),
  'Utils.js': utilsFileContent // 新增该行，将Utils.js纳入store管理
})
</script>
<template>
  <Repl :editor="CodeMirror" :store="store" />
</template>

配置完成后，Repl即可识别Utils.js文件，App.vue也能正常导入并调用其中的方法。

内容的提问来源于stack exchange，提问作者Donut