从自定义 .js 文件访问应用程序上下文以获取语言环境消息
Posted
技术标签:
【中文标题】从自定义 .js 文件访问应用程序上下文以获取语言环境消息【英文标题】:Accessing app context from custom .js files for fetching locale messages 【发布时间】:2020-10-13 04:56:46 【问题描述】:我正在使用 Nuxt.js 在 s-s-r 模式下构建 Vue.js 应用程序。我的项目中有axios
和vue-i18n
插件。
nuxt.config.js
:
export default
mode: 'universal',
// some irrelevant configs
modules: [
'@nuxtjs/axios',
'nuxt-i18n',
],
i18n:
locales: [
code: 'en',
name: 'English',
file: 'en-EN.js'
,
code: 'de',
name: 'Deutsch',
file: 'de-DE.js'
],
defaultLocale: 'en',
vueI18n:
fallbackLocale: 'en',
,
lazy: true,
langDir: 'locales/',
vuex:
moduleName: 'i18n',
syncLocale: true,
syncMessages: true,
syncRouteParams: true
,
,
/* Axios module configuration */
axios:
如您所见,i18n 设置为 惰性 加载。消息来自locales/en-EN.js
和locales/de-DE.js
文件。在文件中,我想向后端 API 发出请求,它将为我提供消息。 locales/en-EN.js
:
export default async function (context)
return await context.$axios.get('backend-api');
但是,当我加载页面时,它显示 $axios
未定义:Cannot read property 'get' of undefined
。但是一旦我开始在语言之间切换,应用程序就会收到翻译。所以我的猜测是服务器在尝试从上下文访问$axios
时失败,但在客户端(浏览器)上它成功了。从 Nuxt context
访问 $axios
模块的正确方法是什么?
【问题讨论】:
【参考方案1】:所以我猜问题是在注入插件期间调用了语言环境文件 (i18n
),因此 axios
在应用程序上下文中尚不可用。
所以我找到了解决方法:
首先,我导入了普通的axios
(除了nuxt模块)
npm i axios -S
然后在语言环境文件中,我在导出函数中导入了它的实例:
// en-En.js
export default async function (context)
// axios is derived directly from lib instead of context
const axios = require('axios').default;
let localeMessages = null
await axios.get(
'backend-api'
).then((result) =>
localeMessages = result.data
).catch(() =>
localeMessages =
);
return localeMessages
仍然不确定这是否是一种有效的方法,但现在它有效
【讨论】:
它确实有效,问题是例如您在 nuxt 配置中设置的默认参数未设置。 谢谢,我在另一个答案中详细说明了我所做的事情:***.com/a/66136834/889126以上是关于从自定义 .js 文件访问应用程序上下文以获取语言环境消息的主要内容,如果未能解决你的问题,请参考以下文章
我可以从自定义 chromecast 接收器访问我的音乐库吗?