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

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

  1. Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' ...

  2. Vue 使用自定义组件时报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    自己试做了一下vue的插件 参考element-ui: 写了一个组件 import message from './packages/message/index.js'; const install ...

  3. Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 点开错误的文 ...

  4. Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法

    发现问题 运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncau ...

  5. vue运行报错error:Cannot assign to read only property 'exports' of object '#<Object>'

    用weex做项目的时候,npm start 之后一直报错error:Cannot assign to read only property 'exports' of object '#<Obje ...

  6. vue 项目的I18n国际化之路

    I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地 ...

  7. spring中使用i18n(国际化)

    简单了解i18n i18n(其来源是英文单词internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称.在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件 ...

  8. javascript 及 vue 中的变量前面的美元符号 $ 是什么意思

    $ 您会注意到,我们将库代理为以美元符号“$”为前缀的属性名. 你可能还看过其他的属性和方法,例如,$refs, $on, $mount等等也都是以”$”开头. 虽然属性名上添加前缀不是必须的,但是这 ...

  9. 项目中遇到Uncaught TypeError: Converting circular structure to JSON报错问题

    最近公司项目中出现一个报错Uncaught TypeError: Converting circular structure to JSON,,根据上述报错可以知道代码是运行到JSON.stringi ...

随机推荐

  1. 【Linux命令】磁盘分区,格式化,挂载命令,创建交换分区(fdisk,mkfs,mount,umount)

    友情链接 磁盘分区,格式化,挂载,创建交换分区:https://www.cnblogs.com/HeiDi-BoKe/p/11936998.html RAID工作级别:https://www.cnbl ...

  2. 2019年全国高校计算机能力挑战赛初赛C语言解答

    http://www.ncccu.org.cn 2019年全国高校计算机能力挑战赛分设大数据算法赛,人工智能算法赛,Office高级应用赛,程序设计赛4大赛项 C语言初赛解答 1:编程1 16.现有一 ...

  3. @Transactional注解失效

    一.特性 先来了解一下@Transactional注解事务的特性吧,可以更好排查问题 1.service类标签(一般不建议在接口上)上添加@Transactional,可以将整个类纳入spring事务 ...

  4. jquery 获取元素(父节点,子节点,兄弟节点)

    费话不多说,直接上代码jquery 获取元素 $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部 ...

  5. PHP ThinkPHP 非常好用的增删改查方法

    获取列表数据(多条) /*** 获取页面列表* @param $params //查询条件 例:['id'=>['in','1,2']] ['status'=>1]* @param arr ...

  6. Thinkphp <= 5.0.10 缓存getshell复现

    目录 Thinkphp <= 5.0.10 缓存getshell复现 0x01 poc 0x02 跟踪源码 0x03 审计思路 0x04 补丁 0x05 参考 Thinkphp <= 5. ...

  7. jwt认证生成后的token后端解析

    一.首先前端发送token token所在的位置headers {'authorization':token的值',Content-Type':application/json} 在ajax写 //只 ...

  8. vue-cli 项目启动过程分析

    启动时没有加入路由 先npm run dev 把项目启动起来.看到 这个熟悉的界面. 首先看到: 这是项目的入口文件,一般引用其他的js,也都是在这个文件进行引用的. 渲染的时候,就是对这个id=&q ...

  9. Linux系统学习 七、网络基础—常用网络命令

    1.ifconfig                 #查看网络(设置IP临时生效) 2.hostname [主机名]            #查看或设置主机名       默认的是localhost ...

  10. nginx配合gotty的websocket连接配置

    由于gotty我作了url加密, 所以url在nginx里的前缀要能替换才行. 配置关键就在于有没有/ #user nobody; worker_processes 1; #error_log log ...