将 Vuetify 与 i18n 一起使用，仅使用 CDN

Question

我正在一个没有 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;

Answer 1

您正在寻找的内容在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 存储库并更改这部分代码，并为自己构建一个新的 dist。
2. 另存为文件vuetify.dist.js并更改该部分代码
3. 使用一些我不推荐的棘手解决方法，但我为您创建了一个示例。

下面是一个代码笔示例，我实际做了什么：

1. 加载带有脚本标签的 Vue.js 文件
2. 使用获取 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: `