iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue3+vite中如何使用import.meta.glob
  • 127
分享到

vue3+vite中如何使用import.meta.glob

Vue3viteimport.meta.glob 2023-05-14 23:05:11 127人浏览 泡泡鱼
摘要

前言: 在Vue2的时候,我们一般引入多个js或者其他文件,一般使用 require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个类似的功能,就是用import.meta.gl

前言:

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

vue3+vite中如何使用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的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue3+vite中如何使用import.meta.glob

本文链接: https://www.lsjlt.com/news/208278.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue3+vite中如何使用import.meta.glob
    前言: 在vue2的时候,我们一般引入多个js或者其他文件,一般使用 require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个类似的功能,就是用import.meta.gl...
    99+
    2023-05-14
    Vue3 vite import.meta.glob
  • vue3+vite中怎么使用import.meta.glob
    本篇内容介绍了“vue3+vite中怎么使用import.meta.glob”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言:在vue2的...
    99+
    2023-07-06
  • vue3+vite中如何使用vuex
    本篇内容主要讲解“vue3+vite中如何使用vuex”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3+vite中如何使用vuex”吧!具体步骤:安装vuex( vue3建议 4.0+ )...
    99+
    2023-07-04
  • Vue3+Vite中如何使用JSX
    这篇文章主要介绍“Vue3+Vite中如何使用JSX”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3+Vite中如何使用JSX”文章能帮助大家解决问题。JSX介绍JSX(JavaScript ...
    99+
    2023-07-04
  • vue3+vite中如何使用svg图标
    这篇“vue3+vite中如何使用svg图标”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3+vite中如何使用svg...
    99+
    2023-06-30
  • 一文详解如何在Vue3+Vite中使用JSX
    目录JSX介绍在 Vue3 中使用 JSX安装插件(@vitejs/plugin-vue-jsx)新建 jsx 文件语法补充知识:注意事项总结JSX介绍 JSX(JavaScript...
    99+
    2023-02-16
    vue3 vite使用jsx vue3+vite 前端 vite搭建vue3
  • vite+vue3中如何使用mock模拟数据问题
    这篇文章主要介绍“vite+vue3中如何使用mock模拟数据问题”,在日常操作中,相信很多人在vite+vue3中如何使用mock模拟数据问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vite+vue3...
    99+
    2023-07-06
  • 图文详解如何在vue3+vite项目中使用svg
    今天在vue3+vite项目练习中,在使用svg时,发现之前的写法不能用,之前的使用方法参考vue2中优雅的使用svg const req = require.context('...
    99+
    2024-04-02
  • 详解Vue3+Vite中怎么使用JSX
    虽然 jsx 最早是由 React 引入,但实际上 JSX 语法并没有定义运行时语义,并且能被编译成各种不同的输出形式。如果你之前使用过 JSX 语法,那么请注意 Vue 的 JSX 编译方式与 React 中 JSX 的编译方式不同,因此...
    99+
    2023-05-14
    Vue vue3 vite JSX
  • 如何使用vue3+ts+vite+electron搭建桌面应用
    本文小编为大家详细介绍“如何使用vue3+ts+vite+electron搭建桌面应用”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何使用vue3+ts+vite+electron搭建桌面应用”文章能帮助大家解决疑惑,下面跟着小编的思路...
    99+
    2023-07-06
  • vite+vue3使用ueditor,后端PHP
    vite+vue3使用ueditor,后端PHP 前端后端 综合所有前端能用的富文本编辑器,功能最好最多的还是百度的富文本编辑器(ueditor) 前端 下载ueditor,将其放在pub...
    99+
    2023-09-01
    php 前端 开发语言 vue.js
  • vue3+vite使用jsx和tsx详情
    目录安装@vitejs/plugin-vue-jsx配置vite.config.js使用实战第一种写法使用this第二种写法第三种写法安装@vitejs/plugin-vue-jsx...
    99+
    2024-04-02
  • Vue3中级指南之如何在vite中使用svg图标详解
    目录前言vite-plugin-svg-icons安装使用如何在组件中使用创建SvgIcon组件icons目录结构全局注册组件页面使用获取所有 SymbolId总结前言 svg图片在...
    99+
    2024-04-02
  • vuex在vite&vue3中的简单使用说明
    目录vuex在vite&vue3的使用一、说明二、使用vue3.x之vite初体验一、项目搭建二、附项目结构三、附项目启动成功图vuex在vite&vue3的使用 注...
    99+
    2024-04-02
  • Vite中怎么使用Ant Design Vue3.x框架
    今天小编给大家分享一下Vite中怎么使用Ant Design Vue3.x框架的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我...
    99+
    2023-07-02
  • Vue3+Vite项目如何使用mockjs随机模拟数据
    今天小编给大家分享一下Vue3+Vite项目如何使用mockjs随机模拟数据的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在...
    99+
    2023-07-05
  • Vite创建Vue3项目及Vue3使用jsx的方法
    使用 yarn:yarn create @vitejs/app使用 npm:npm init @vitejs/app1. 输入项目名称这里输入我们的项目名称:vite-vue32. 选择框架这里选择我们需要集成的框架:vuevanilla:...
    99+
    2023-05-22
    Vue3 vite jsx
  • 使用vite怎么搭建一个vue3应用
    今天就跟大家聊聊有关使用vite怎么搭建一个vue3应用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分...
    99+
    2023-06-06
  • vite+vue3中怎么使用mock模拟数据问题
    1.安装mockjs和vite-plugin-mocknpm i mockjs vite-plugin-mock --save-dev2.在vite.config.ts文件中配置vite-plugin-mock使用方式import { de...
    99+
    2023-05-15
    Vue3 vite mock
  • Vue3怎么使用Vite打包组件库
    本文小编为大家详细介绍“Vue3怎么使用Vite打包组件库”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue3怎么使用Vite打包组件库”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。打包配置vite 专门提供...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作