> For the complete documentation index, see [llms.txt](https://408550179s-organization.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://408550179s-organization.gitbook.io/blog/vue-huan-jing-zhong-wen-jian-de-du-qu-yin-yong-cao-zuo-de-gan-huo.md).

# vue环境中文件的读取/引用/操作的干货

**vite读取文件内容信息**

通常我们常用file/fs模块去对文件进行文件操作增删改查。但是文件模块只能在node环境中运行，无法在vite层使用fs模块。这里我提供两个前端在vite项目中简单只读文件的操作。

1、使用request请求访问文件，请求类型使用text文本类型，这里不多做赘述。

2、在vite环境引用文件的时候在引用路径最后加上?row，贴一下代码

```javascript
  import text from '../../../../README.md?raw'
  console.log(text)
  // 获取文件后文件内容以文本格式返回
```

**glob的文件动态引用**

直接贴代码吧

```javascript
  // 获取某个文件夹下所有的vue文件 并且 存入newModule
  const modulesFiles = import.meta.glob('../../views/*/*/stepsform/*.vue', { eager: true })
  const newModule = []
  Object.entries(modulesFiles).map(([key, value], index) => {
    if (key.includes(props.folder)) {
      newModule.push(value)
    }
  })
```

```html
// view视图
<component :is="modules" ref="modulesRef"></component>
```

```javascript
动态渲染组件 根据current参数的动态变化
const modulesRef = ref()
const modules = computed(() => {
    return defineAsyncComponent(newModule[current.value])
})
```