首页 > 其他分享 >Vue require is not defined

Vue require is not defined

时间:2022-11-07 22:44:43浏览次数:62  
标签:files Vue const defined require module js import

vue中想动态引入资源,而且涉及到if else 的判断条件的 ,类似于vue/index.js 中的

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/vue.cjs.prod.js')
} else {
  module.exports = require('./dist/vue.cjs.js')
}

 

而这个require是内部封装。我们项目中又不是直接引用。 而且用 import 又不能用到if else 的局部中

采用 import.meta.globEager 方法代替require导入资源。比如下面根据的引入mockjs ,可以把这段放在main.js中

// 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock
if (process.env.NODE_ENV !== 'production') {
    //debugger
    const allmockfiles= import.meta.globEager(  '@/api/allmock.js')
}

 

而不是要引用某个目录下的文件的话,比如我下面的中英文

//提示信息仅供在开发环境生效
import { createI18n } from 'vue-i18n';
import store from '@/store'
const files= import.meta.globEager(  './modules/*.js')
let messages ={}
Object.keys(files).forEach((c )=> {
    const module = files[c].default
    const moduleName =c.replace( /^\.\/(.*)\/(.*)\.\w+$/, '$2')
    messages[moduleName] = module
})

//const lang = store.state.app.lang || navigator.userLanguage || navigator.language // 初次进入,采用测览器当前设置的语言,然认采用中文
const lang = navigator.userLanguage || navigator.language
const locale = lang.indexOf('en')!== -1 ? 'en':'zh-cn'
const i18n = createI18n({
    legacy: false,
    __VUE_I18N_LEGACY_API__: false,
    __VUE_I18N_FULL_INSTALL__: false,
    locale: locale,
    fallbackLocale:'zh-cn',
    messages
})
document.querySelector( 'html' ).setAttribute( 'lang', locale)

export default i18n

其中用到的加载的部分核心就是,要的人也可以在forEach方法里面自己加判断条件

const files= import.meta.globEager(  './modules/*.js')
let messages ={}
Object.keys(files).forEach((c )=> {
    const module = files[c].default
    const moduleName =c.replace( /^\.\/(.*)\/(.*)\.\w+$/, '$2')
    messages[moduleName] = module
})

 

标签:files,Vue,const,defined,require,module,js,import
From: https://www.cnblogs.com/zhian/p/16867766.html

相关文章

  • Vue 如何实现组件的切换
    使用场景:我们开发项目的时候,会遇到组件之间的切换,一般都是创建组件销毁组件来回切换;但是现在需求是切换组件的时候,另一个组件不会销毁;基于这个需求,我们使用keep-live......
  • VUE3初学
    VUE初学创建一个Vue项目powershell中运行vueui 认识Vue各个文件夹(20条消息)前端Vue项目架构-文件夹作用的分析总结_码大星的博客-CSDN博客 .Vue文件 t......
  • day26 Vue相关内容及深拷贝和浅拷贝
    Vue相关内容概述:Vue是前端的一个Js库(诞生于2015年,兴起于2016年,尤雨溪写的(目前是阿里巴巴在维护)),vue是MVVM模式的框架.MVVM概述:model数据v......
  • Vue路由实现的底层原理
    在Vue中利用数据劫持defineProperty在原型prototype上初始化了一些getter,分别是router代表当前Router的实例、router代表当前Router的实例、router代表当前Router的实例......
  • vue共享屏幕功能
    参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia使用方法:https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_A......
  • vue实现展开收起
    通过设置css超出换行,监听是否超出所设置的值,重新对数据插入标识,并刷新dom树实现。<divclass="class-datas"> <pclass="datas-title">可排课专业:</p> <p:class="`${......
  • 拖拽功能 vue + 移动端
    1.  在components里面创建一个公共组件,dragMove.vue<!--拖拽滑动效果--><template><divid="item_box"@click="goMove"@touchstart="down"@touchmove="move"......
  • vue2.0引入css文件后报错
    vue2.0的main.js中引入css文件后报错。报错示例:UncaughtError:Moduleparsefailed:/Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/i......
  • vue项目中定义全局变量、全局函数
    在vue项目中,我们经常会遇到要在多个页面组件中都要使用的一个变量或者函数,比如说需要配置的ip地址,在生产环境和测试环境不一样就需要修改。因此我们可以定义一个全局变量来......
  • Vue构建一个项目
    vue2.0推荐开发环境Homebrew1.0.6(Mac)Node.js6.7.0npm3.10.3webpack1.13.2vue-cli2.4.0Atom1.10.2构建vue项目1、下载node.js下载地址:https://nodejs.org/en/检查是......