Vue require is not defined

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
})

 

posted @ 2022-11-07 22:35  ☆♂安♀★  阅读(3078)  评论(0编辑  收藏  举报