vue3 ElementPlus i18n國際化
阿新 • • 發佈:2021-09-04
- main.ts引入i18n
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from "./plugins/ElementPlus"; import common from "./plugins/common"; import i18n from './language'; createApp(App).use(store).use(router).use(ElementPlus).use(common).use(i18n).mount('#app');
- 新建資料夾language, language資料夾下建立lang資料夾、index.ts,lang資料夾下建立語言型別檔案
- 自動引入檔案型別檔案
/** * require.context * @param {directory}:表示檢索的目錄 * @param {useSubdirectories}:表示是否檢索子資料夾 * @param {regExp}:匹配檔案的正則表示式,一般是檔名 * @param {mode}:載入模式,同步/非同步 */ import { createI18n } from 'vue-i18n' const lang = require.context(`./lang`, false, /\.ts$/); const messages:any = {}; lang.keys().forEach(key => { const val = lang(key).default; const name = key.replace(/(.*\/)*([^.]+).*/ig, '$2'); messages[name] = val; }); const i18n = createI18n({ locale: navigator.language.toLowerCase(), //預設顯示的語言 messages }); export default i18n;