Vue-i18n - 无法读取未定义的属性“配置”

2024-03-07

首先,我向您展示什么是有效的(在 App.js 中)

import router from './routes.js'; 
import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})


const app = new Vue({
        el: '#app',
        router,
        i18n
});

但是如果我想将lang.js中的代码分开

import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

export default new VueI18n({
   locale: 'en', // set locale
   messages, // set locale messages
});

这样我就可以在 App.js 中编写

import router from './routes.js'; 
import i18n from './lang.js'; 

const app = new Vue({
        el: '#app',
        router,
        i18n
});

但不知怎的,即使routes.js的构建完全相同,这也不起作用。

如果了解这一点很重要的话,我的 bootstrap.js 看起来就是这样。

import Vue from 'vue';

window.Vue = Vue;

import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n';

Vue.use(VueRouter);
Vue.use(VueI18n);

我对长代码感到抱歉,但不知何故,错误在于 import i18n from './lang.js'; 我收到消息:未捕获类型错误:无法读取未定义的属性“配置”


在创建应用程序实例的主文件中添加 i18n 作为选项而不是Vue.use(Vuei18n)像这样:

new Vue({
  el: '#app',
  i18n,  // < --- HERE
  store,
  router,
  template: '<App/>',
  components: { App }
})

就放在后面el;

这应该是你的语言:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import fr from './fr'
import ro from './ro'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en, fr, ro
  }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue-i18n - 无法读取未定义的属性“配置” 的相关文章

  • Vue cli 3项目,图像路径中的动态src不起作用

    我在 vue 组件中引用图像 url 例如 img alt Vue logo src statics reports logo png 这有效 但在尝试的同时 img alt Vue logo data return imgPath sta
  • Vue.js 路由器 - 条件组件渲染

    routes path name home get component if Vue loggedIn return Home else return Login 我添加了一个吸气剂 似乎工作正常 但我在 if 语句中使用的任何变量或函数都
  • VueJS 将类切换到表中的特定元素

    我似乎不知道如何在表中的特定项目上切换类 我使用 v for 循环数据并将其打印给用户 目标是当用户单击表内的特定元素时切换类 当我尝试添加 v bind class active isActive 时 它只是将该类添加到所有类中 而不是特
  • 如何使用 Vue 路由器从 Vuex 操作进行导航

    我正在使用 Vue 2 x 和 Vuex 2 x 创建一个 Web 应用程序 我正在通过 http 调用从远程位置获取一些信息 我希望如果该调用失败 我应该重定向到其他页面 GET PETS state gt return http get
  • 如何在 Laravel 中使用 Vue 路由器?

    我使用 laravel9 和 vue3 进行开发 我的问题很简单 但是路径设置不太顺利 当我访问网址时localhost 8080 tasks 此 url 返回 404 未找到 我收到以下类型错误 获取http localhost 8000
  • Vue父组件访问子组件的compute属性

    在 Vue JS 中 当在数组元素 子元素 的计算属性中进行更改时 我无法监视数组的更改 我在编写的 JSFiddle 示例中总结了这个问题 因此该示例在逻辑上可能没有意义 但它确实显示了我的问题 https jsfiddle net tr
  • #NUXT.JS 中常用组件方法的存储位置

    实际上我想知道 NUXT JS 中常见组件方法的存储位置 我尝试过的事情 gt 在中间件中存储公共代码 它没用 因为据我所知 中间件只能处理对服务器的请求和响应 methods states methods SwitchManager fu
  • 使用Vue组件渲染函数时无限循环

    我正在使用 Vue 组件来渲染一些表头 如下所示 render createElement return createElement div class header Array apply null length this initHou
  • 如何在外部 .js 文件中分离 .vue 组件的方法?

    我的组件留下了许多行代码 因此我决定将这些方法放在一个名为functions js 的单独文件中 我无法调用这些方法 我试过这个 函数 js function sendList function getLists function dele
  • Vue 创建项目 - 找不到模块“vue-loader-v16/package.json”

    我通过命令全局安装了 vue clinpm install g vue cli我尝试通过命令创建新项目vue create examples vue 2一切都很好 直到我跑步npm run serve 这个命令给我一个错误找不到模块 vue
  • 仅当内容超过两行时显示只读/隐藏按钮

    我正在创建一个评论部分 类似于 youtube 的东西 并且我希望能够在 content 有多行时显示阅读更多 隐藏按钮 这就是我到目前为止所做的 我的阅读更多 隐藏按钮可以工作 因为我添加了一个计算的线夹 使内容仅在存在多行时才显示两行
  • 使用 Vue.JS 时,我们是否被迫在 CSP 中使用“unsafe-inline”?

    有没有办法让 Vue js 与 CSP 正常配合 当我运行我的spa应用程序 由npm run generate使用 Nuxt js 我会收到几个警告 例如 拒绝应用内联样式 因为它违反了以下规定 内容安全策略指令 style src se
  • npm install -D sass-loader node-sass Vue.js 2021

    您好 问题是为 Vue js 设置 SASS 我跑 Node js 15 7 0 Vue js vue cli 4 5 11 这是我在运行此命令时在控制台中遇到的错误 npm install D sass loader 节点 sass np
  • 从可组合项访问引用值

    这是我的 Vue3 应用程序代码
  • vue:转义并渲染 HTML 字符串?

    我正在尝试在模板中渲染一些 HTML 字符串 但我希望它们是字符串 我不想渲染 富文本 我开始于
  • 如何从特定索引渲染 v-for

    我想在 v for 中循环假设从数字 5 到 10 循环希望在 5 点开始并在 10 点结束 我试过这个 div div 但我想要更有效的循环方式 有谁知道如何让循环从 5 开始 对于你的例子来说是可能的 div some code her
  • Vue 3 - 如何使用反应式引用并在没有 .value 的情况下进行计算?

    当我们使用选项 API https v3 vuejs org api options api html 我们可以在中定义一些属性computed部分和一些属性data部分 所有这些都可以通过实例从实例访问this引用 即在同一个对象中 非常
  • Vue 2 转换不起作用

    我不知道我的代码哪里出了问题 这应该是一个简单的过渡 当我单击按钮时 消息显示正确 但只是根本没有发生淡入淡出过渡
  • 部署到 Netlify 时,Nuxt 将 CSS 不透明度编译为 1%,而不是 100%

    我有一个 Nuxt 应用程序 在本地运行得很好 当我将它部署到 Netlify 时 其中yarn generate自动运行 我注意到发生了一些奇怪的 CSS 事情 我有一张具有悬停效果的卡片
  • Vue 2 日期选择器组件

    我正在尝试使用 Bootstrap Datepicker 创建 Vue 2 组件 但在选择日期后尝试更新输入时遇到困难 这是我的代码 Vue component datepicker template

随机推荐