problem description

the project uses iview and vue-i18n plug-in, and basically all of them can be translated. However, it is found that Modal and DatePick of iview cannot be translated and no error is reported.

the environmental background of the problems and what methods you have tried

at present, there are two solutions on the Internet:

1. Vue.prototype._i18n = i18n; ( https://www.jianshu.com/p/e22.)

https://codeshelper.com/a/11.

but none of this works for me

related codes

-dividing line-

locale/index
import Vue from "vue";
import VueI18n from "vue-i18n";

import customZhCn from "./lang/zh-CN";
import customEnUs from "./lang/en-US";
import zhCnLocale from "webbase/dist/locale/zh-CN";
import enUsLocale from "webbase/dist/locale/en-US";
// import zhCnLocale from "webbase/src/locale/lang/zh-CN";
// import enUsLocale from "webbase/src/locale/lang/en-US";

Vue.use(VueI18n);

const locales = {
  "zh-CN": Object.assign(customZhCn, zhCnLocale),
  "en-US": Object.assign(customEnUs, enUsLocale)
};
// 
const DEFAULT_LANG = "zh-CN";
// localStorage
const STORAGE_LANG = "locale";

// 
const navLang = navigator.language;
const localLang = locales[navLang] ? navLang : false;
let lang = localStorage.getItem(STORAGE_LANG) || localLang || DEFAULT_LANG;

// vue-i18n 6.x+
Vue.locale = () => {
};

const messages = locales;


const i18n = new VueI18n({
  locale: lang,
  messages
});

export default i18n;

-dividing line-

main.js

Vue.use(webBase, {i18n: (key, value) => i18n.t(key, value)});
new Vue({
  el: "-sharpapp",
  i18n,
  router,
  store,
  render: (h) => h(App)
}

where webBase is equivalent to iview, with its own defined component, and its function is the same

what result do you expect? What is the error message actually seen?

if you have encountered this problem, let"s take a look at