Использование Vuetify с i18n с использованием только CDN - PullRequest
Новая
       36

Использование Vuetify с i18n с использованием только CDN

6 голосов
/ 16 июня 2019

Я работаю над проектом Vue в статической среде без Node или Vue-cli. Мы импортируем Vue, Vuetify и vue-i18n с использованием CDN.

Нам нужно перевести компоненты Vuetifyиспользуя Vue-i18n, как показано здесь

Вот кодовое поле попытки, которую я сделал, пытаясь перевести часть нумерации страниц внизу.

Я пытался использовать 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;

1 Ответ

1 голос
/ 30 июня 2019

То, что вы ищете, недоступно в 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, измените эту часть кода и создайте новый дистрибутив для себя.
  2. Сохраните как файл vuetify.dist.js и измените эту часть кода
  3. Использованиенекоторые хитрые хитрые обходные пути, которые я не рекомендую, но я создал образец для вас.

Вот кодовое перо пример , Что я на самом деле делаю:

  1. Загрузите файл Vue.js с тегом scripts
  2. Используйте fetch api для загрузки содержимого vuetify.dist.min.js
  3. Замените window.Vue на что-то другое, чтобы убедиться, что vuetify won 't установить автоматически!
  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: `
...