vscode 下载 i18n Ally 插件

vscode setting.json 配置 i18n

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

Vue 项目中创建 i18n 目录和上方的 “i18n-ally.localesPaths” 对应

创建 i18n.js 配置文件, cn.json , en.json 语言文件

编写 i18n.js 文件

import Vue from "vue";
import VueI18n from "vue-i18n";
// import 可以直接到导入 json 文件并使用
import cn from "./cn.json";
import en from "./en.json";
Vue.use(VueI18n); // VueI18n 必须在下方 VueI18n 创建 实例前进行安装
var i18n = new VueI18n({
    locale: "cn",
    messages: {
        cn: cn,
        en: en,
    },
});
export default i18n; // 安装后导出到 main.js 中在容器的 Vue 容器实例中进行使用 new Vue({i18n})

Vue 项目的 main.js 中使用 i18n

项目使用

注意: 如果 i18n-ally 检测不出来框架, 或 提示错误, 不能翻译, 可能是插件版本太高的缘故