Vue encounter Uncaught TypeError use in the i18n internationalization: Can not assign to read only property 'exports' of object '# <Object>'

Vue recently used in the front end of the frame structures, in reference to the i18n, run time error: Uncaught TypeError: Can not assign to read only property 'exports' of object '# <Object>', in this record.

 

First look at the code: Install the plug-i18n not tired out ( npm install vue-i18n)

Chinese: cn.js

= module.exports { 
  
        indexText: { 
            Code: ' number ' , 
        } 
}

English: en.js

module.exports={

        indexText:{
            Code:'Code',
       }
}

Js references to two of main.js

Vue Import from  ' VUE ' 
Import the App from  ' ./App ' 
Import Store from  ' ./store/store ' 
Import Router from  ' ./router ' 
Import VueI18n from  ' VUE-the i18n ' 
Vue.config.productionTip = to false 

Vue.use (VueI18n) // mount in the form of plug 


moment.locale ( ' ZH-CN ' ); // set the language or moment.lang ( 'ZH-CN'); 
. $ Vue.prototype Moment = Moment;// assignment using 
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')

The above code will run when the page is blank, do not show any errors, but we open the console, you can see the output error: Uncaught TypeError: ASSIGN of Can not only to the Read Property 'Exports' of Object '# <Object>' ,

This error causes: in webpack package, they can mix and require export in js file. But not mix import and module.exports.

In Baidu to post for this reason, so the whole project each search, module.exports, locate and make changes to the code above adjustment, cn.js, en.js in module.export into Export .

Adjustment of Chinese cn.js

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

export{
   MessageCh
}             

English en.js adjustment

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

export{
   MessageEn
}      

Adjust 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) // mount in the form of plug 


moment.locale ( ' ZH-CN ' ); // set the language or moment.lang ( 'ZH-CN'); 
. $ Vue.prototype Moment = Moment; // assignment using 
const the i18n = new new VueI18n ({ 
  the locale: ' ZH-the TCC ' , 
  messages: { 
    ' ZH-the CN ' : MessageCh,
     ' EN-US ' : MessageEn,
     ' ZH-the TCC ' : MessageTcc 
  } 
}) 


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