时间戳

首页 > 解决方案 > 仅使用 CDN 将 Vuetify 与 i18n 一起使用

javascript - 仅使用 CDN 将 Vuetify 与 i18n 一起使用

问题描述

我正在一个没有 Node 或 Vue-cli 的静态环境中开发 Vue 项目，我们正在使用 CDN 导入 Vue、Vuetify 和 vue-i18n

我们需要使用 Vue-i18n 翻译 Vuetify 组件，如下所示

这是我尝试的代码笔，试图翻译底部的分页部分。

我试过使用Vue.use()但无法让它工作，控制台中没有错误，页面上也没有翻译。

import App from '../components/App.vue.js';
import i18n from '../lang/languages.js';
import store from './store/store.js';

Vue.filter('toUpperCase', function(value) {
  return value.toUpperCase();
});

Vue.config.devtools = true;

Vue.use(Vuetify, {
  lang: {
    t: (key, ...params) => i18n.t(key, params)
  }
});

new Vue({
  i18n,
  store,
  el: '#app',
  render: (h) => h(App)
});

语言/语言.js：

import { russian } from './languages/russian.js';
import { chineseSimple } from './languages/chinese-simple.js';
import { german } from './languages/german.js';
import { portuguese} from './languages/portuguese.js';

const languages = {
  'ru': russian,
  'zh-Hans': chineseSimple,
  'de': german,
  'pt': portuguese,
};

const i18n = new VueI18n({
  locale: 'en',
  messages: languages
});

export default i18n;

标签： javascriptvue.jsvuetify.jsvue-i18n

解决方案

您正在寻找的内容在CDN发行版中不可用。你可能会问为什么？

看看这段代码：

const Vuetify: VuetifyPlugin = {
  install (Vue: VueConstructor, args?: VuetifyUseOptions): void {
    Vue.use(VuetifyComponent, {
      components,
      directives,
      ...args
    })
  },
  version: __VUETIFY_VERSION__
}

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Vuetify)
}

特别是这部分：

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Vuetify)
}

它会自动安装 Vuetify，无需任何语言等配置，因此您Vue.use(Vuetify, {..})不会被调用，因为Vue 不会安装两次插件！

你能做什么？

  1. 克隆 Vuetify repo 并更改这部分代码并为您自己构建一个新的 dist。
  2. 另存为文件vuetify.dist.js并更改该部分代码
  3. 使用一些我不推荐的 hacky 棘手的解决方法，但我为您创建了一个示例。

这是一个代码笔示例，我实际上在做什么：

  1. 加载带有脚本标签的 Vue.js 文件
  2. 使用 fetch api 下载vuetify.dist.min.js
  3. 替换window.Vue为其他东西以确保vuetify不会自动安装！
  4. 评估更改的代码

我完全不推荐这种方法

fetch("https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js")
  .then(res => res.text())
  .then(vutify => {
    eval(vutify.replace("window.Vue", "window.Vue2"));

    Vue.use(Vuetify, {
      lang: {
        t: (key, ...params) => i18n.t(key, params)
      }
    });

    const App = Vue.component("app", {
      template: `

推荐阅读