1. 程式人生 > 其它 >VUE中CDN方式使用國際化vue-i18n.js

VUE中CDN方式使用國際化vue-i18n.js

技術標籤:vue

1、引入

<script src="statics/libs/vue.min.js"></script>
<script src="statics/config/i18nMessages.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

vue-i18n要在vue之後引入

2、JS使用
i18nMessages.js 用來做配置國際化

const i18nMessages =
{ 'zh_CN': { 'hello': '你好', }, 'en_US': { 'hello': 'hello', } }

業務JS

	var i18n = new  VueI18n({
		locale: 'zh_CN',
		messages:i18nMessages
	})
	
    var vm = new Vue({
        el: '#loginBox',
		i18n,
        data: {
        },
        methods: {
        },
	    beforeCreate: function () {
}, created: function () { } });

HTML:

<p style="font-size:12px;color:#515a6e;">肖肖{{$t('hello')}}</p>

效果:
在這裡插入圖片描述
在這裡插入圖片描述