# 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])
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://408550179s-organization.gitbook.io/blog/vue-huan-jing-zhong-wen-jian-de-du-qu-yin-yong-cao-zuo-de-gan-huo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.