vue-i18n使用ES6语法以及空格换行问题
1.运行报错
报错使用了不恰当的exports
Uncaught TypeError : Cannot assign to read only property 'exports ' of object ' # < Object > '
网上很多教程是写的
//zh.js
module.exports={part1 : {name:'姓名',nation:'地区'}part2 : {gender:'性别'}
}
//lang.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);const messages = {'zh': require('../lang/zh.js'), // 中文语言包'en': require('../lang/en.js'), // 英文语言包
}export default new VueI18n({locale: 'zh', // set locale 默认显示中文fallbackLocale: 'en', //如果语言包没有,则默认从英语中抽取messages: messages // set locale messages
});
使用了module.exports以及require,然后运行可能会报错
点击错误
原因是:The code above is ok. You can mix require and export. You can‘t mix import and module.exports.
在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports。
因为webpack 2中不允许混用import和module.exports,说是要统一使用es6语法
所以 ,解决方法:
require改成import
module.exports改成export default
具体可参照 vue-i18n安装配置运行 2,4点
nice!
2.字段的空格,换行处理
使用 v-html将js文件中的字段中包含的符号解析成html能解析的样子
v-html用于输出html,将内容当成html标签解析后展示
空格
zh.js
export default{part1 : {name:'姓 名',nation:'地区'}part2 : {gender:'性别'}
}
show.vue
//wrong
<div><p>$t{{part1.name}}</p> //展示为姓 名
</div>
//right
<div><p v-html='$t(part1.name)'></p> //展示为姓 名
</div>
换行
zh.js
export default{part1 : {name:'姓<br>名',nation:'地区'}part2 : {gender:'性别'}
}
show.vue
//wrong
<div><p>$t{{part1.name}}</p> //展示为姓<br>名
</div>
//right
<div><p v-html='$t(part1.name)'></p>
//展示为
// 姓
// 名
</div>
3.匹配多语言某一项
zh.js
export default{part1 : {app0:'你好',app1:'您好'}
}
show.vue
//item.e = 0
<div><p>{{$t(`part1.app${item.e}`)}}</p> //展示为 你好
</div>
转载于:https://www.cnblogs.com/gggggggxin/p/10076166.html
vue-i18n使用ES6语法以及空格换行问题相关推荐
- vue打包后有es6语法兼容问题,ie报错
vue打包后有es6语法兼容问题,ie报错 (个人学习笔记,仅供参考): 情景:ie/360浏览器打开build之后的页面报错了,点击报错定位的时候发现有"const"和箭头函数语 ...
- Vue不能编译ES6语法的解决方案
场景:在公司的私有npm服务器上install了一个包,包名叫做qd-spm2,这个包是公司同事用es6语法编写的. 步骤: 首先npm install --save qd-spm2 然后在main. ...
- vue中的ES6语法整理1
1.箭头函数 ES6允许使用"箭头"(=>)定义函数 var f = v => v;//等价于var f = function(v){return v; }; 如果箭头 ...
- VUE 爬坑之旅 -- 用 ES6 语法写一个工具类,并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 .这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 ...
- Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- Vue——进阶(过滤器、数据交互、生命周期、ES6语法)
目录 过滤器 数据交互 生命周期函数 ES6语法 过滤器 1.定义过滤器: (1)局部过滤器: new Vue({el:"#app",filters:{// 写在vue对象里面的过 ...
- 【Vue.js 知识量化】ES6 语法积累
ES6 语法 let / var const 的使用 class.extends.super 箭头函数(arrow function) 模版字符串(template string) 结构(destru ...
- .vue文件在webstorm中es6语法报错解决方法
.vue文件在webstorm中es6语法报错解决方法 参考文章: (1).vue文件在webstorm中es6语法报错解决方法 (2)https://www.cnblogs.com/yuqing6/ ...
- vscode vue es6语法配置检测
话说,为了配置vscode,es6语法自动检测,百度的各种攻略,踩坑不少,最重要还没用......将最后解决的方法分享大家,共同进步! 配置方法: 1. 插件下载 ESLint,JavaScript( ...
最新文章
- 原创:MS Dynamics AX - XBRL 功能
- 河北省高校计算机大赛,河北省教育厅关于举办2016年华北五省(市、自治区)及港澳台大学生计算机应用大赛河北赛区竞赛的通知...
- mysql 查看运行级别_运行级别及进程
- Linux -- 基于zookeeper的java api(二)
- 台式linux桌面远程链接华为云windows服务器桌面
- Apache HTTP服务器 2.0版本文档
- NMS 原理和c++实现,已测试通过
- {基于Applet的J2ME模拟器}和{microemulator}[J2ME推荐]
- 西门子定位器6DR5020-0NG00-0AA0
- 外贸营销网站系统开发功能案例制作
- 深度 GHOST XP SP3 装机版 2012 08
- Java:详解Java中的异常(Error与Exception)
- 【NanoPi T2】 7.uboot gmac网卡驱动(3) - 驱动源码解析
- 2022年上海市安全员C证考试内容及上海市安全员C证考试技巧
- 服务器上Kafka启动报错:error=‘Cannot allocate memory‘ (errno=12)
- 标准库:csv --- CSV 文件读写
- ffmpeg常用库、术语、API、数据结构总结
- Android网络框架Volley项目实战-刘桂林-专题视频课程
- android obd编程,【图】DIY Android手机应用通过OBD读取行车电脑信息
- vue通过发送手机号码短信验证登录