Creé una aplicación iónica y agregué vue-i18n.
npx ionic start myapp tabs --type vue npm install vue-i18n@nextHice el primer paso de la configuración de VueI18n y agregué esto a "./src/main.ts":
import { createI18n } from 'vue-i18n'; const i18n = createI18n({ locale: 'de', fallbackLocale: 'en', messages: {en: {testMessage: 'Test message'}, de: {testMessage: 'Testnachricht'}} }); Al mirar el resultado después npx ionic serve , aparece la siguiente advertencia en la consola del navegador:
Está ejecutando la compilación esm-bundler de vue-i18n. Se recomienda configurar su paquete para reemplazar explícitamente los indicadores globales de características con literales booleanos para obtener una sacudida de árbol adecuada en el paquete final.
Y obtengo esta información en la consola del navegador:
Está ejecutando una compilación de desarrollo de vue-i18n. Asegúrese de usar la compilación de producción (*.prod.js) cuando implemente para producción.
Cuando comento el fragmento agregado a "./src/main.ts", ambas notificaciones desaparecen. Así que realmente parecen ser causados por vue-i18n.
Después de preguntarle a Google, todavía no sé qué hacer con estas notificaciones. ¿Qué me están diciendo? ¿Debo hacer algo al respecto? ¿Qué puedo hacer específicamente?
Estos son los archivos que se crearon automáticamente en la carpeta raíz del nuevo proyecto:
./ionic.config.json ./cypress.json ./jest.config.js ./babel.config.js ./.gitignore ./package-lock.json ./package.json ./.eslintrc.js ./tsconfig.json ./capacitor.config.json ./.browserslistrcPor favor, también dígame dónde necesitaría cambiar algo. también
$ find . -type f ! -name package-lock.json -maxdepth 1 -exec grep -iH webpack {} \; ./tsconfig.json: "webpack-env",así que no sabré qué hacer si me dices "simplemente configure el paquete web correctamente".
Ahora estoy usando esta forma de importar el i18n, la advertencia desaparece
import { createI18n } from 'vue-i18n/index'Recibí la misma advertencia en mi consola con el paquete anterior. Luego actualicé el proyecto a "vue-i18n": "^9.2.0-beta.15" y estuvo bien.
Primero instale vue-18n en el último paquete (^9.2.0-beta.15): npm i --save vue-i18n@next
Luego: creé el archivo i18n.ts en la misma ruta con main.ts
import { createI18n, LocaleMessages, LocaleMessageValue, VueMessageType } from 'vue-i18n'; /** * Load locale messages * * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`. * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation */ function loadLocaleMessages(): LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> { const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i); const messages: LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> = {}; locales.keys().forEach((key) => { const matched = key.match(/([A-Za-z0-9-_]+)\./i); if (matched && matched.length > 1) { const locale = matched[1]; messages[locale] = locales(key).default; } }); return messages; } const setDateTimeFormats = { short: { year: 'numeric', month: 'short', day: 'numeric', }, long: { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: 'numeric', minute: 'numeric', }, }; const dateTimeFormats = { en: setDateTimeFormats, es: setDateTimeFormats, de: setDateTimeFormats, 'en-GB': setDateTimeFormats, }; export default createI18n({ locale: process.env.VUE_APP_I18N_LOCALE || 'tr', fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', messages: loadLocaleMessages(), dateTimeFormats, }); Y mi archivo main.ts :
import i18n from './i18n'; app.use(i18n).use(store).use(router).mount('body');