上一主题 下一主题
返回列表 发新帖

quasar的i18n中文组件设置

[复制链接]

78

主题

532

帖子

756

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
756
发表于 2021-1-29 14:45:51 | 显示全部楼层 | 阅读模式

设置quasar组件的i18n

这里我们可以参考http://www.quasarchs.com/options/quasar-language-packs/

首先确认自己需要的语言包,网址在https://github.com/quasarframework/quasar/tree/dev/ui/lang

这里我选择了简体中文,繁体中文,英语

也就是 zh-hant|zh-hans|en-us

官方给的代码如下

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

export default async () => {
  const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(de|en-us)\.js$/ */
      'quasar/lang/' + langIso
      )
      .then(lang => {
        Quasar.lang.set(lang.default)
      })
  }
  catch (err) {
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
}

其实只需要输入


    await import(
      /* webpackInclude: /(de|en-us)\.js$/ */
      'quasar/lang/' + langIso
      )
      .then(lang => {
        Quasar.lang.set(lang.default)
      })

就可以,但是我在编程的过程中碰到了

图片.png

是因为没有修改

/* webpackInclude: /(de|en-us)\.js$/ */

这个注释其实是webpack的魔术注释

可以根据里边的内容动态加载语言包,因为我没修改,所以导致找不到,接下来改为

/* webpackInclude: /(zh-hant|zh-hans|en-us)\.js$/ */

即可正常运行

另外注意文档上还有

始终限制动态导入

请注意Webpack magic comment
webpackInclude的使用。 否则,将捆绑所有可用的语言包,从而导致编译时间和捆绑包大小增加。 请参阅动态导入注意事项

尽量限制动态导入,否则会导致编译时间和捆绑包大小的增加

另外如果感觉很麻烦,干脆删掉注释其实也可以,这样就默认全部导入了

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表