vue3+vite中使用import.meta.glob

这篇具有很好参考价值的文章主要介绍了vue3+vite中使用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

官方入口:点我

vue3 import.meta,vue3.0,前端,vue.js,vue3,vite

具体方法:

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
}

 文章来源地址https://www.toymoban.com/news/detail-552146.html

到了这里,关于vue3+vite中使用import.meta.glob的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3使用Vite打包报Rollup failed to resolve import “xxx/node_modules/ant-design-vue/xxxx

    在使用vue3 + vite + ant design vue 的时候,引入一些antd的一些组件的时候,通常运行是没有错的,但是打包会报错,例如: Rollup failed to resolve import \\\"D:/xxxxx/node_modules/ant-design-vue/es/form-item-rest/style/index\\\" from \\\"src/views/xxx/xxx.vue\\\". 15:01:51 This is most likely unintended because it can break your applic

    2024年02月16日
    浏览(47)
  • 前端vue3分享——项目封装axios、vite使用env环境变量

    大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。 该系列往期文章: csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 什么是axios axios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行H

    2024年02月07日
    浏览(96)
  • vue3自动引入插件unplugin-auto-import (vite搭建项目,vue-cli搭建项目两种方式)

    插件地址:https://github.com/antfu/unplugin-auto-import 如果安装了eslint,使用的ref、torefs等报错undefind如下图 需在2个地方vue.config.js ,.eslintrc.js文件做配置 代码:

    2024年02月13日
    浏览(60)
  • vue3+vite+vant项目下按需引入vant报错Failed to resolve import解决方案

    在学习vite+vue3+vant开发项目过程中, 参考vant官网开发指南-快速上手-引入组件 vant组件库官网 按照上述配置好后,运行vite环境报错:Failed to resolve import 根据报错信息,发现是vant的样式引入路径不对。 以 Button 组件为例 程序解析为:项目路径/node_modules /vant/lib /vant/es/button/s

    2024年02月15日
    浏览(56)
  • 前端VUE3+Vite +UniAPP-- 框架搭建

    除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。 全局安装 vue-cli 官网 配置tailwindcss插件 官网 在 tailwind.config.js 配置文件中添加所有模板文件的路径。 将加载 Tailwind 的指令添加到你的 CSS 文件中 在你的主 CSS 文件中通过 @tailwind 指令添加每一

    2024年02月11日
    浏览(45)
  • Vue3+Vite前端知识汇总1篇

       目录 1、设置package.json,让编译完成后自动打开浏览器。 2、设置vite.config.ts,设置src别名,后面就不用 ../../../ 了。 3、安装@types/node  解决vscode显示红波浪线问题。  4、安装 sass和reset.css 5、创建并引入全局组件,HospitalTop 6、安装路由,并添加切换路由后滚动到顶部功能

    2024年02月16日
    浏览(44)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十一章 基础界面开发 (组件封装和使用)

    Vue 是前端开发中非常常见的一种框架,它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中,组件的开发也变得非常简单,但随着 Vue3 版本的发布,组件开发有了更多的特性和优化,为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件

    2024年02月19日
    浏览(89)
  • Vite + Vue3 实现前端项目工程化

    Vue3 发布至今,周边的生态、技术方案已足够成熟,个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus Vue权限系统案例 个人博客 通过官方脚手架初始化项目 第一种方式,这是使

    2024年02月03日
    浏览(74)
  • 前端 vite+vue3——写一个随机抽奖组件

    大家好,我是yma16,本文分享关于前端 vite+vue3——写一个抽奖随机组件。 vue3系列相关文章: 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道选手所在城

    2024年02月08日
    浏览(44)
  • vue3+vite的项目报错 await import(‘source-map-support‘).then((r) => r.default.install()) ^^^^^Synta

      await import(\\\'source-map-support\\\').then((r) = r.default.install())     ^^^^^ SyntaxError: Unexpected reserved word  查看一下node版本  报错原因是node版本的问题。要使用16之上的版本 我的电脑安装了nvm可以查看目前已有的node版本。不会安装nvm的参考这个

    2024年02月15日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包