vue-i18n使⽤ES6语法以及空格换⾏问题1.运⾏报错
报错使⽤了不恰当的exports
Uncaught TypeError : Cannot assign to read only property 'exports ' of object ' # < Object > '
⽹上很多教程是写的
//zh.js
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
});
使⽤了ports以及require，然后运⾏可能会报错
点击错误
原因是：The code above is ok. You can mix require and export. You can‘t mix import ports.
在webpack打包的时候，可以在js⽂件中混⽤require和export。但是不能混⽤import 以及ports。
因为webpack 2中不允许混⽤import和ports，说是要统⼀使⽤es6语法
所以，解决⽅法：
require改成import
具体可参照 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>
js assign<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。