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

vite/vue环境，文件的读取/引用干货

vite读取文件内容信息

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

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

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

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

glob的文件动态引用

直接贴代码吧

  // 获取某个文件夹下所有的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)
    }
  })

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

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