vue3+vite中使用import.meta.glob的操作代码

目录
  • 前言：
  • vue3中使用 import.meta.glob
  • 具体方法：

前言：

在vue2的时候，我们一般引入多个js或者其他文件，一般使用  require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个类似的功能，就是用import.meta.glob来引入多个，单个的文件。 这里说说他们的对比和区别： vue2 中使用  require 来引入多个不同的js文件

1、引入  modules 下的所有的js文件

const modulesFiles = require.context('./modules', true, /\.js$/)

2、循环，拿到每个js文件的名称和js返回的具体内容

modulesFiles.keys().reduce((modules, modulePath) => {
  // 名称：从 './app.js' 取到 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')

    // 内容，每个js中export default  返回的内容
  const value = modulesFiles(modulePath)
}, {})

vue3中使用 import.meta.glob

官方入口：点我

具体方法：

1、引入 modules下面的所有的js文件

const modulesFiles = import.meta.glob('./modules/*.js',{ eager: true }); // 异步方式

2、拿到具体文件名称和文件内容

let modules = {}
for (const [key, value] of Object.entries(modulesFiles)) {
    //名称  因为这里拿到的是  ./modules/app.js ，所以需要两层处理
  var moduleName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
  const name = moduleName.split('/')[1]

  //具体的内容，都是每个js中返回值  value.default
  modules[name] = value.default
}

到此这篇关于vue3+vite中使用import.meta.glob的文章就介绍到这了,更多相关vue3使用import.meta.glob内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3+vite引入插件unplugin-auto-import的方法

    vue3+vite引入插件unplugin-auto-import的方法

    自动引入 composition api,不需要再手动引入.github地址:https://github.com/antfu/unplugin-auto-import 下载 npm i unplugin-auto-import -D 修改vite.config.ts文件 import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [vue(),AutoImport({ imp

  • vue3 Vite 进阶rollup命令行使用详解

    目录 rollup介绍 以命令行方式打包 Tree Shaking Rollup 的命令行使用 命令行 format 格式 rollup.config.js 设置/获取环境变量 插件 plugins rollup介绍 开源类库优先选择 以 ESM 标准为目标的构建工具 Tree Shaking 以命令行方式打包 安装 rollup npm install -g rollup 创建 index.js 文件 import path from "path"; console.log(&quo

  • vue3+vite自定义封装vue组件发布到npm包的全过程

    目录 创建项目 创建组件 导出组件 使用vite构建 打包 注册->登录npm 发布前准备 发布到npm 参考: 总结 创建项目 “vue”: “^3.2.8” “vite”: “^2.5.2” 习惯用HB的直接用创建vue3项目即可 或 npm init vite@latest 创建组件 打开项目 在src/components文件夹下新增文件,我这里叫TestBtn.vue <template> <button>我是测试要发布的按钮组件</button> &l

  • Vue3+Vite实现动态路由的详细实例代码

    Vue3+Vite实现动态路由的详细实例代码

    项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import { createRouter, createWebHashHistory } from "vue-router"; import store from '../store/index.js' const routes = [{ path: "/login", component: () => import("../

  • vue3+vite中使用import.meta.glob的操作代码

    vue3+vite中使用import.meta.glob的操作代码

    目录 前言: vue3中使用 import.meta.glob 具体方法: 前言: 在vue2的时候,我们一般引入多个js或者其他文件,一般使用  require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个类似的功能,就是用import.meta.glob来引入多个,单个的文件. 这里说说他们的对比和区别: vue2 中使用  require 来引入多个不同的js文件 1.引入  modules 下的所有的js文件 const modulesFi

  • vue3+vite中使用vuex的具体步骤

    vue3+vite中使用vuex的具体步骤

    目录 前言: 具体步骤: 前言: 在vue3+vite创建的项目中使用vuex,要注意的是vite有部分写法和之前的webpack是不同的,比如,他不支持 require,想把vue2的项目直接升级到vue3的时候,需要改很多地方,如果非要使用vite也可以,记得改相关的内容. 具体步骤: 1.安装vuex( vue3建议 4.0+ ) pnpm i vuex -S 2.main.js中配置 import store from '@/store' // hx-app的全局配置 const app

  • vue3+vite中开发环境与生产环境全局变量配置指南

    vue3+vite中开发环境与生产环境全局变量配置指南

    目录 一.开发环境和生产环境 二.配置环境变量 三.使用全局变量 总结 一.开发环境和生产环境 开发环境:也就是编码时运行的环境,即我们使用npm run dev或者npm run serve运行项目到本地时,项目处于的环境. 生产环境:项目部署到服务器上后处于的环境,我们使用npm run build将项目打包以后,再运行项目,项目就运行在生产环境中了. 对于不同的环境,我们可以配置不同的环境变量,来实现开发和生产的兼容. 例如: 开发环境时,我们可以请求自己本地的接口(‘/api’ prox

  • Python中join（）函数多种操作代码实例

    这篇文章主要介绍了Python中join()函数多种操作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Python中有.join()和os.path.join()两个函数,具体作用如下: . join(): 连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串 os.path.join(): 将多个路径组合后返回 对序列进行操作(分别使用' ' .' - '与':'作为分隔符) a=['1aa','

  • Java中的常用输入输出语句的操作代码

    Java中的常用输入输出语句的操作代码

    一.概述 输入输出可以说是计算机的基本功能.作为一种语言体系,java中主要按照流(stream)的模式来实现.其中数据的流向是按照计算机的方向确定的,流入计算机的数据流叫做输入流(inputStream),由计算机发出的数据流叫做输出流(outputStream). Java语言体系中,对数据流的主要操作都封装在java.io包中,通过java.io包中的类可以实现计算机对数据的输入.输出操作.在编写输入.输出操作代码时,需要用import语句将java.io包导入到应用程序所在的类中,才可以

  • Java中保证线程顺序执行的操作代码

    只要了解过多线程,我们就知道线程开始的顺序跟执行的顺序是不一样的.如果只是创建三个线程然后执行,最后的执行顺序是不可预期的.这是因为在创建完线程之后,线程执行的开始时间取决于CPU何时分配时间片,线程可以看成是相对于的主线程的一个异步操作. public class FIFOThreadExample { public synchronized static void foo(String name) { System.out.print(name); } public static void

  • VUE3+vite项目中动态引入组件与异步组件的详细实例

    目录 一.全量注册,随用随取 1. 把项目中所有vue文件注册成异步组件. 2. 获取组件 3. 参考如下 二.使用@rollup/plugin-dynamic-import-vars插件 1.介绍 2.安装 3.使用 4.How it works 总结 一.全量注册,随用随取 1. 把项目中所有vue文件注册成异步组件. const app = createApp(App); function registerGlobalAsyncComponents(app: VueApp) { const

  • Vue3中级指南之如何在vite中使用svg图标详解

    目录 前言 vite-plugin-svg-icons 安装 使用 如何在组件中使用 创建SvgIcon组件 icons目录结构 全局注册组件 页面使用 获取所有 SymbolId 总结 前言 svg图片在项目中使用的非常广泛,今天记录一下我是如何在vue3 + vite 中使用svg图标. vite-plugin-svg-icons 预加载 在项目运行时就生成所有图标,只需操作一次 dom 高性能 内置缓存,仅当文件被修改时才会重新生成 安装 node version:  >=12.0.0 v

  • 如何利用Vue3+Vite批量导入模块/资源

    如何利用Vue3+Vite批量导入模块/资源

    目录 前言 1,前置基础知识-JavaScript模块化编程 (1)export语句-暴露函数和变量使外部调用 (2)import语句-导入变量/函数并使用 (3)import*asxxx语句-全部导入 (4)exportdefault-默认导出 2,在Vite工程中批量导入js模块 3,在Vite工程中批量导入图片/音频等静态资源 总结 前言 在Vue项目开发中,我们常常会导入一些外部的模块,或者是自己写模块导入. 但是模块多了,一个个地导入很显然不是一个好办法,因此我们可以批量导入. 1,前

随机推荐