前端国际化【免费下载链接】vue-i18n:globe_with_meridians: Internationalization plugin for Vue.js项目地址https://gitcode.com/gh_mirrors/vu/vue-i18n点击查看免费下载本指南以 vue-i18n 仓库中的 Contentful 集成示例examples/integration/contentful为主线完整讲解如何从零注册 Contentful 账号、创建内容空间、生成访问令牌、导入内容模型、编写本地配置文件直至运行和部署一个由 vue-i18n 驱动双语界面的静态博客站点。读完本指南你将掌握 Contentful 的 CMA/CDA 双令牌体系、contentful-import数据导入流程以及 vue-i18n 如何通过 locale 联动 Contentful 内容检索实现界面语言 内容语言一体化切换的完整实战方案。一、这个示例项目是什么examples/integration/contentful是 vue-i18n 仓库中的官方集成示例它演示了一个5 分钟搭建基于 Contentful 的静态博客内容即服务 CMS Vue 生态的组合方案Contentful负责内容的创建、管理与分发提供 Content Delivery APICDA与 Content Management APICMANuxt.js负责页面渲染、静态生成与路由预取vue-i18n负责界面文案的国际化并基于当前 locale 向 Contentful 发起对应语言的查询。该示例的配套文档 GETTING-STARTED.md 给出了完整的自助搭建步骤本文将以它为骨架结合仓库内的 nuxt.config.js、package.json 与 plugins/i18n.js 等源码逐层展开。示例首页、博客详情页与标签页分别位于 pages/index.vue、pages/blog/_slug.vue 和 pages/tags/_tag.vue语言相关组件在 components/language-header.vue 与 components/navigation.vue。二、前置条件注册 Contentful开始动手之前需要先在 Contentful 官网完成注册获得一个可用的账号。整个搭建流程涉及两类内容对象对象用途Space内容空间内容模型与数据的容器每个项目对应一个独立空间Access Token访问令牌分为 CMA 令牌管理/写入数据与 CDA 令牌读取/分发数据两类后续所有操作都围绕创建一个空间 拿到两类令牌 导入数据 本地配置展开。三、克隆仓库与安装依赖示例文档给出的标准起步命令如下$ git clone 当前仓库地址 cd vue-i18n $ cd examples/integration/contentful $ npm install在当前仓库中该示例自带完整的 package.json核心运行时依赖包括contentfulCDA 客户端用于读取空间数据contentful-managementCMA 客户端用于管理端操作如读取内容类型以枚举标签nuxt示例基于 Nuxt 1.x 构建vue-i18n国际化插件版本为^7.6.0vue-markdown把文章正文的 Markdown 渲染为 HTML。开发依赖中则包含了contentful-import用于把导出数据写入新空间、eslint系列与now用于部署。四、获取 Contentful 配置数据示例文档强调要配置并启用一个新空间必须创建并获取所需的访问令牌。下面按步骤说明。4.1 创建新的 Space在 Contentful Web 应用左上角的空间概览区域点击入口即可创建新空间创建新空间对话框创建完成后请记下该空间的Space ID后续配置文件的CTF_SPACE_ID需要用到它。4.2 创建 Content Management APICMA令牌CMA 令牌用于写入侧操作。在顶层菜单进入APIs再进入Content Management tokens即可创建创建 CMA 令牌对话框注意导入数据到新空间这一步必须使用 CMA 令牌因为contentful-import需要通过管理 API 写入内容模型与内容条目。4.3 创建 Content Delivery APICDA令牌并获取 Space IDCDA 令牌用于读取侧操作。同样在顶层菜单进入APIs这次进入Content Delivery / Preview tokens创建创建 CDA 令牌对话框复制 CDA 令牌注意CDA 令牌用于访问空间中存储的数据即站点运行时读取文章内容所依赖的凭据。五、向新空间导入数据有了 CMA 令牌与 Space ID 之后就可以把示例附带的内容模型与数据导入新空间。这里使用 Contentful 生态提供的contentful-import工具它可以把预先导出的数据完整写入指定空间。由于该工具已被声明为开发依赖见 package.json 的devDependencies无需全局安装直接通过 npm scripts 调用即可。示例文档给出的命令为$ npm run import-data -- --space-id YOUR_SPACE_ID --management-token YOUR_MANAGEMENT_TOKEN参数说明--npm 脚本参数透传分隔符。文档特别提示--用于把 npm scripts 后的参数原样交给实际执行的命令缺少它会报错--space-id目标空间的 ID--management-token第 4.2 节创建的 CMA 令牌。从 package.json 的scripts.import-data可以看到该命令的真实组成import-data: node ./bin/download-content-model.js contentful-import --content-file ./data/blog/contentful-export.json即先执行内容模型下载脚本再以./data/blog/contentful-export.json为内容文件运行contentful-import一次性完成内容模型 内容数据的导入。六、创建本地配置文件Contentful 侧配置完成后需要定义本地运行配置。文档要求将示例根目录下的.contentful.sample.json重命名为.contentful.json并填入两个实际是三个必需值。6.1 需要配置的键配置键含义填写方式CTF_SPACE_ID数据所在空间的 ID填写你创建的 Space IDCTF_CDA_ACCESS_TOKENContent Delivery API 令牌用于拉取数据填写第 4.3 节获取的 CDA 令牌CTF_CMA_ACCESS_TOKENContent Management API 令牌用于获取合法标签填写第 4.2 节获取的 CMA 令牌CTF_PERSON_ID作者条目 ID示例已预置正确值无需修改CTF_BLOG_POST_TYPE_ID博客文章内容类型 ID示例已预置为blogPost无需修改示例配置文件的完整形态如下文档同时强调 JSON 不支持注释实际使用时必须删除注释{ // these values are already correct CTF_PERSON_ID: 15jwOBqpxqSAOy2eOO4S0m, CTF_BLOG_POST_TYPE_ID: blogPost, // these values have to be defined by you CTF_SPACE_ID: YOUR_SPACE_ID, CTF_CDA_ACCESS_TOKEN: YOUR_DELIVERY_ACCESS_TOKEN, CTF_CMA_ACCESS_TOKEN: YOUR_MANAGEMENT_ACCESS_TOKEN }6.2 配置与源码的对应关系从 nuxt.config.js 的源码可以看到项目启动时会通过getConfigForKeys一次性读取上述五个键const {getConfigForKeys} require(./lib/config.js) const ctfConfig getConfigForKeys([ CTF_BLOG_POST_TYPE_ID, CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN, CTF_CMA_ACCESS_TOKEN, CTF_PERSON_ID ])随后这些值被分派到三处使用CDA 客户端plugins/contentful.js的createClient用CTF_SPACE_ID与CTF_CDA_ACCESS_TOKEN创建读取客户端CMA 客户端直接用CTF_CMA_ACCESS_TOKEN创建管理客户端用于读取文章内容类型、枚举标签集合环境变量env块把CTF_SPACE_ID、CTF_CDA_ACCESS_TOKEN、CTF_PERSON_ID、CTF_BLOG_POST_TYPE_ID注入生成期与浏览器上下文供页面asyncData使用。七、本地预览站点配置就绪后运行$ npm run dev该命令会启动开发服务器站点默认运行在localhost:3000。此时可以验证两件事数据是否正确从 Contentful 拉取、多语言是否正常工作。7.1 vue-i18n 的接入方式该示例通过 Nuxt 插件机制接入 vue-i18n注册位置在 nuxt.config.js 的plugins数组plugins: [ ~/plugins/contentful, ~/plugins/i18n ]plugins/i18n.js 的核心逻辑如下import Vue from vue import VueI18n from vue-i18n const DEFAULT_LOCALE en-US Vue.use(VueI18n) export default ({ app, req }) { let locale DEFAULT_LOCALE if (process.client) { const navigator window.navigator const languages navigator.languages || navigator.language || navigator.browserLanguage || navigator.userLanguage locale languages[0] } else if (req) { locale req.headers[accept-language].split(,)[0] } app.i18n new VueI18n({ locale, fallbackLocale: DEFAULT_LOCALE, messages: { en-US: require(~/locales/en-US.json), ja: require(~/locales/ja.json) }, dateTimeFormats: { en-US: { short: { year: numeric, month: short, day: numeric } }, ja: { short: { year: numeric, month: short, day: numeric } } } }) }这段源码揭示了几个关键设计locale 自动探测客户端优先取navigator.languages[0]服务端SSR 场景取Accept-Language请求头的第一个语言标签缺省回退到en-USfallbackLocale当某个语言缺少对应文案时自动回退到en-US保证界面永不出现空白键消息与日期格式英日双语消息分别来自 locales/en-US.json 与 locales/ja.json并同时注册了两种语言的短日期格式挂载到 Nuxt 应用通过app.i18n暴露给全局页面中可用$t()翻译文案、用$i18n.locale读取当前语言。7.2 locale 如何联动 Contentful 内容检索这是本示例最有价值的一点界面语言与内容语言由同一个 locale 驱动。以首页 pages/index.vue 为例asyncData ({ app, env }) { return Promise.all([ client.getEntries({ content_type: env.CTF_BLOG_POST_TYPE_ID, locale: app.i18n.locale, order: -sys.createdAt }) ]).then(([posts]) { return { posts: posts.items } }).catch(console.error) }注意locale: app.i18n.locale——每次请求 Contentful 内容时都把 vue-i18n 当前的 locale 作为查询参数传入因此浏览器语言是英文时拉到英文文章是日文时拉到日文文章。博客详情页 pages/blog/_slug.vue 也采用同样的模式按fields.slug与app.i18n.locale双重过滤。而 components/language-header.vue 则用$t(components.language.current, { language: $i18n.locale })把当前语言代码渲染到页面上作为语言切换的视觉反馈。7.3 静态生成时的路由预取部署前若执行nuxt generatenuxt.config.js 的generate.routes()会在生成期同时调用 CDA 客户端获取全部文章条目、调用 CMA 客户端读取博客内容类型并把条目 slug 映射为/blog/{slug}、把内容类型上校验的合法标签枚举映射为/tags/{tag}从而保证静态站点覆盖所有动态路由。八、部署站点到 now示例文档推荐用nowzeit 提供的静态托管服务部署。执行$ npm run deploy首次运行时会被要求输入邮箱地址并完成确认之后站点即被发布到云端。从 package.json 可以看到deploy脚本的真实行为deploy: nuxt generate now dist即先执行nuxt generate生成完整静态站点再把dist目录推送到 now 托管整个过程无需自建服务器。九、关键要点与排查提示JSON 无注释配置文件中的//注释只是文档示意落地到.contentful.json时必须删除否则 JSON 解析失败--透传npm run import-data必须带--否则--space-id等参数不会被传给contentful-import三类凭据各司其职Space ID 定位数据、CDA 令牌读数据、CMA 令牌写/管理数据三者缺一不可且不要混淆 CMA/CDA 令牌的用途语言回退兜底fallbackLocale: en-US保证即使某个语言文案缺失也不会出现空白界面生成期与浏览器环境变量env块中的配置在nuxt generate与服务端渲染时均可用页面asyncData中的env参数正是来源于此内容类型 ID 与标签校验generate.routes()中通过 CMA 客户端读取内容类型的validations[0].in数组来枚举标签路由因此标签页路由是数据驱动的内容模型变更后需重新generate。综上这份示例文档完整覆盖了注册 → 建空间 → 取令牌 → 导数据 → 写配置 → 本地运行 → 云端部署的全链路而 vue-i18n 在其中扮演的正是界面多语言 内容多语言联动的核心角色。若要在生产项目中复用该方案只需替换空间与令牌并把 locales 下的语言包扩充为你的目标语言即可。赞分享前端国际化【免费下载链接】vue-i18n:globe_with_meridians: Internationalization plugin for Vue.js项目地址https://gitcode.com/gh_mirrors/vu/vue-i18n点击查看免费下载相关推荐使用 Eleventy 与 Vercel 零配置搭建静态博客从示例项目到生产部署使用 Eleventy 与 Vercel 零配置搭建静态博客从示例项目到生产部署 本指南以当前仓库 examples/eleventy https://linCLI后端云原生Element 国际化i18n完整实战指南从语言包配置到 vue-i18n 深度集成Element 国际化i18n完整实战指南从语言包配置到 vue i18n 深度集成 本文是一份以 ElementVue.js 2.0 UI Toolk前端UI组件设计系统在 Vercel 上用 Eleventy 零配置部署博客从 Markdown 文章到 _site 静态站点的完整实践在 Vercel 上用 Eleventy 零配置部署博客从 Markdown 文章到 _site 静态站点的完整实践 导读 本文以 Vercel 开源仓库中CLI后端云原生上一篇Hitboxer5分钟掌握专业游戏按键映射与SOCD清理技巧告别操作冲突下一篇Joy-Con Toolkit技术方案深入解析Switch手柄的完全控制体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考