安装配置vuei18n

npm install vue-i18n@8.9.0

在src下创建locales文件夹 locales/i18n.js

import Vue from 'vue'

import VueI18n from 'vue-i18n'
// 这些是翻译文件
import enLocale from './en'

import usLocal from './zh-CN'

import zhHK from '@/locales/zh-HK'

Vue.use(VueI18n)

const messages = {
    // 加入到vuei18n中
    en: {

        ...enLocale

    },

    cn: {

        ...usLocal

    },

    HK: {

        ...zhHK

    }

}

const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'cn',

    messages

})

  
export default i18n

在src/main.js,加入到vue中

import Vue from 'vue'

  


import 'normalize.css/normalize.css' // A modern alternative to CSS resets

  


import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import locale from 'element-ui/lib/locale/lang/en' // lang i18n

  


import '@/styles/index.scss' // global css

  


import App from './App'

import store from './store'

import router from './router'

  


import '@/icons' // icon

import '@/permission' // permission control
// 引入i18n
import i18n from './locales/i18n'



// set ElementUI lang to EN

// Vue.use(ElementUI, { locale })

// 如果想要中文版 element-ui，按如下方式声明

Vue.use(ElementUI)

  


Vue.config.productionTip = false

  


new Vue({

  el: '#app',

  router,

  store,
   // 注册到vue中
  i18n,

  render: h => h(App)

})

安装i18n Ally

扩展中搜索 i18n Ally进行安装

配置i18n ally

在.vscode 文件夹下添加settings.json

{

    //设置i18n-ally配置

    "i18n-ally.localesPaths": [

        "src/locales"

    ], // 翻译文件路径

    "i18n-ally.keystyle": "nested", // 翻译路径格式,

    "i18n-ally.sourceLanguage": "zh-CN", // 翻译源语言

    "i18n-ally.displayLanguage": "zh-CN", //显示语言， 这里也可以设置显示英文为en

    "i18n-ally.enabledParsers": [

        "json"

    ],

    "i18n-ally.enabledFrameworks": [

        "vue"

    ],

    "i18n-ally.extract.autoDetect": true

}