我正在一个没有Node或Vue-cli的静态环境中进行Vue项目, 我们正在使用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;
答案 0 :(得分: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.js
并更改部分代码这是一支电笔example,我的实际操作:
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: `