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