在Vue中使用i18n 国际化遇到 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

最近用Vue在搭建前端框架，在引用i18n时，运行的时候报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'，在此记录下。

先看看代码：安装i18n 插件就不累述了（npm install vue-i18n）

中文：cn.js

module.exports={
  
        indexText:{
            Code:'編號',
        }
}

英文：en.js

module.exports={

        indexText:{
            Code:'Code',
       }
}

引用上两个js 中的 main.js

import Vue from 'vue'
import App from './App'
import store from './store/store'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.config.productionTip = false

Vue.use(VueI18n)//通过插件的形式挂载


moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn'); 
Vue.prototype.$moment = moment;//赋值使用
const i18n=new VueI18n({
  locale:'zh-TCC',
  messages:{
    'zh-CN':require('./i18n/lang/cn'),
    'en-US':require('./i18n/lang/en'),
  }
})


new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

以上代码再运行的时候就会页面一片空白，也不显示任何错误，但我们打开console，可以看到输出报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'，

导致这个错误的原因：在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。

在百度到这个原因后，于是整各项目搜索，module.exports，定位到以上代码并做出修改调整，将cn.js 、en.js中的module.export 改成export。

调整中文 cn.js

var MessageCh={
     
        indexText:{
              Code:'编号'
    
        }
}   

export{
   MessageCh
}             

调整英文 en.js

var MessageEn={
     
        indexText:{
              Code:'Code'
    
        }
}   

export{
   MessageEn
}      

调整main.js

import Vue from 'vue'
import App from './App'
import store from './store/store'
import router from './router'
import VueI18n from 'vue-i18n'
import {MessageCh} from './i18n/lang/cn'
import{MessageEn} from './i18n/lang/en'
import{MessageTcc} from './i18n/lang/tcc'
Vue.config.productionTip = false

Vue.use(VueI18n)//通过插件的形式挂载


moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn'); 
Vue.prototype.$moment = moment;//赋值使用
const i18n=new VueI18n({
  locale:'zh-TCC',
  messages:{
    'zh-CN':MessageCh,
    'en-US':MessageEn,
    'zh-TCC':MessageTcc
  }
})


new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')