vue项目多语言化

1. 在src下面创建目录，放多语言包（json/js）
2. . 使用vue-i18n，创建index.js

    import Vue from 'vue'; import VueI18n from 'vue-i18n';
    //引用element-ui语言包 element-en,element-zh // 导入语言包信息 import en from
    "./locale/en.json"; import zh from "./locale/zh-CN.json"; // 注册i18n
    Vue.use(VueI18n); // 语言包根据语言环境分类 const localeMessages = { en: {
        ...element-en,//element框架
        ...en }, zh:{
        ...element-zh
        ...zh } }; 
        const i18n = new VueI18n({ 
        locale: zh,//当前默认语言环境
         messages: localeMessages }) 

     3. 注册vue-i18n（main.js中）  

  		import i18n from './i18n';// 引入i18n实例
        
        new Vue({   i18n, // 挂载到根实例中   render: h => h(App) }).$mount('#app')

     4. element框架多语言化
     在index.js里面引用element语言包，
     在vue.config.js里面配置（或 webpack.config.js）,
     configureWebpack里面的 plugins加入

官网地址：https://element.eleme.cn/#/zh-CN/component/i18n

按需加载：ElementLocale.i18n((key, value) => i18n.t(key, value))；

new webpack.NormalModuleReplacementPlugin(/element-ui[/\]lib[/\]locale[/\]lang[/\]zh-CN/,
‘element-ui/lib/locale/lang/en’)

     5. 可使用的插件（vscode）    vue-swift-i18n ,可以生成中文包，
     6. key    i18n-ally:增强多语言化之后代码的可读性
     7. i18n-ally配置：

vscode setting.json 配置 i18n

    // Vue: i18n-ally 插件如下须要本身配置
    "i18n-ally.localesPaths": ["src/assets/lang"], // 翻译的语言路径
    "i18n-ally.enabledParsers": ["json", "js"], // 翻译支持的语言文件格式,不写的话，无法支持js
    "i18n-ally.encoding": "utf-8", // 翻译文件的编码
    "i18n-ally.sourceLanguage": "zh-CN", // 根据此 zh-CN 语言文件翻译其他语言文件的 变量和内容
    "i18n-ally.displayLanguage": "zh-CN", // 组件中显示的语言
    "i18n-ally.keystyle": "flat", 
    // 翻译后变量的格式, flat(扁平式即对象属性路径变成一个长字符串), nested(嵌套式即对象属性变量可以进行相互之间的嵌套)
    // 注意: 如果 i18n-ally 检测不出来框架, 或 提示错误, 可能是版本太高的缘故

i18n-ally


参考文档：https://gitee.com/antfu/i18n-ally/#-%E5%B8%B8%E7%94%A8%E8%AE%BE%E7%BD%AE