我正在使用vueI18n进行应用程序的国际化,我想加载一些翻译文件,只有在某些条件下。
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
我尝试了一个动态导入:
// main.ts
let extraLocales;
if (import.meta.env.VITE_MY_VAR) {
extraLocales = await import(`./locales/${import.meta.env.VITE_MY_VAR}/de.json`);
}
import deDefault from "./locales/de.json";
const i18n = createI18n({
locale: "de",
legacy: false,
messages: {
de: merge({}, deDefault, extraLocales ? extraLocales : {})
}
});
在开发模式下,使用npm run dev
,一切都很好,我可以看到一个获取文件http://localhost:5173/src/locales/my_var_value/de.json?import=
的请求。但是在构建应用程序并在nginx的docker容器中提供它之后,我得到了以下错误:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
和
Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:8082/assets/locales/my_var_value/de.json
我已经添加了这个额外的配置,我发现已经不是那么好了:
// vite.config.ts
esbuild: {
supported: {
'top-level-await': true //browsers can handle top-level-await features
},
},
你知道我做错了什么吗?或者你能给我点建议吗?
1条答案
按热度按时间ippsafx71#
好的,事实上我已经有了解决方案,但是我忽略了一个事实,那就是我使用了一个promise,并且文件是在i18n的示例创建之后加载的
这一招奏效了这仍然是一个好方法吗?