看了上一篇博客吗? 我们就根据那一篇博客来, 用里面的项目, 进行我们接下来国际化翻译项目.
我们安装 vue-I18N 和 JS-cookie
- NPM install vue-I18N
- NPM install JS-cookie --save
第一步在 main.JS 的 JS 引入 I18N
第二步建立 src/locale 文件夹,
- //en-US.JS
- export default {
- "components": {
- // "langChange": 'Language switching'
- "langChange": 'Lang'
- }
- }
- //zh-CN
- export default {
- "components": {
- "langChange": '语言'
- }
- }
- //index.JS
- import Vue from 'vue'
- import VueI18n from 'vue-i18n'
- import Cookies from 'js-cookie'
- import zhCNLocale from 'iview/src/locale/lang/zh-CN'
- import enUSLocale from 'iview/src/locale/lang/en-US'
- import zhCN from './lang/zh-CN'
- import enUS from './lang/en-US'
- Vue.use(VueI18n)
- const messages = {
- 'zh-CN':{
- ...zhCN,
- ...zhCNLocale
- },
- 'en-US':{
- ...enUS,
- ...enUSLocale
- }
- }
- const getLanguage = function () {
- let lang = navigator.browerLanguage?navigator.browerLanguage:navigator.language||navigator.userLanguage
- lang = lang?lang:'zh-CN'
- if(Cookies.get('language')){
- lang = Cookies.get('language')
- }
- return lang
- }
- const I18N = new VueI18n({
- locale:getLanguage(),
- messages
- })
- export default I18N
创建 LangSelect.vue 组件
- <template>
- <div>
- <Dropdown>
- <a href="javascript:void(0)">
- {{$t('components.langChange')}}
- <Icon type="ios-arrow-down"></Icon>
- </a>
- <Dropdown-menu slot="list">
- <!--
- DropdownItem 这里必须用 @click.native 绑定点击事件
- -->
- <Dropdown-item v-for="(item,key) in languages" :key="item.id" @click.native="changeLanguage(key)">
- {{ item }}
- </Dropdown-item>
- </Dropdown-menu>
- </Dropdown>
- </div>
- </template>
- <script>
- export default {
- computed: {
- locale() {
- return this.$store.getters.language
- }
- },
- mounted() {
- // this.currentLanguage = this.languages[this.locale];
- },
- data() {
- return {
- // currentLanguage: "",
- languages: {
- "zh-CN": "简体中文",
- "en-US": "English"
- }
- };
- },
- methods: {
- changeLanguage(lang) {
- this.$I18N.locale = lang
- this.$store.dispatch('setLanguage', lang)
- this.currentLanguage = this.languages[this.locale];
- }
- }
- };
- </script>
- <style scoped>
- </style>
在 store 中添加状态
- //action/index.JS
- import setLanguage from './setLanguage.js'
- export default {
- setLanguage
- }
- //setLanguage.JS
- import Cookies from 'js-cookie'
- export default ({ commit, getters }, language) => {
- commit('updateLanguage', language)
- }
- //getters/index.JS
- import language from './language'
- export default {
- language
- }
- //getters/language.JS
- export default (state) => {
- return state.language
- }
- //mutations/index.JS
- import updateLanguage from './updateLanguage'
- export default {
- updateLanguage
- }
- //mutations/updateLanguage.JS
- import Cookies from 'js-cookie'
- export default (state,language) => {
- console.log('updateLang:'+language)
- state.language = language
- Cookies.set('language',language)
- }
- //state/index.JS
- import language from './language'
- export default {
- language
- }
- //state/language
- import Cookies from 'js-cookie'
- export default Cookies.get('language') || 'zh-CN'
- //store/index.JS
- import Vue from 'vue';
- import Vuex from 'vuex';
- Vue.use(Vuex);
- import state from './state'
- import getters from './getters'
- import mutations from './mutations'
- import actions from './actions'
- export default new Vuex.Store({
- state,
- getters,
- mutations,
- actions
- })
在 HelloWorld 中引入 LangSelect 组件
- <template>
- <div class="language-all">
- <div class="langguage">
- <lang-select class="right-menu-item"></lang-select>
- </div>
- </div>
- </template>
- <script>
- import {mapGetters} from 'vuex'
- import LangSelect from './LangSelect'
- export default {
- name: 'HelloWorld',
- components:{
- 'lang-select':LangSelect
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- h3 {
- margin: 30px auto 20px 30px;
- }
- .device-list-con {
- padding: 10px;
- }
- .table-bar {
- margin: 30px 20px 10px 20px
- }
- .table-bar .search-input {
- width: 300px;
- }
- .table {
- margin: 0 20px 0 20px
- }
- </style>
我们看一下页面运行的效果
大家可以按照上面我的方法做, 实现不了效果留言, 我解答
来源: http://www.bubuko.com/infodetail-3104130.html