仅使用 CDN 将 Vuetify 与 i18n 结合使用

Question

我正在静态环境中开发一个 Vue 项目，没有 Node 或 Vue-cli，我们正在使用 CDN

导入 Vue、Vuetify 和 vue-i18n

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

Here is a codepen 我尝试翻译底部的分页部分。

我试过使用 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)
});

lang/languages.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;

Answer 1

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

看看这个code:

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 won't install plugins twice!

你能做什么？

克隆 Vuetify 存储库并更改这部分代码并为您自己构建一个新的 dist。
另存为文件 vuetify.dist.js 并更改那部分代码
使用一些我不推荐的棘手的变通方法，但我为您创建了一个示例。

这里是码笔example，我实际做的是：

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

我根本不推荐这种方法

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: `

仅使用 CDN 将 Vuetify 与 i18n 结合使用

Using Vuetify with i18n using CDNs only

javascript

vue.js

vuetify.js

vue-i18n