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> //展現爲姓&nbsp;&nbsp;&nbsp;名
</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>