最近用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')