0

我正在尝试使用 i18next 在我的网站上设置本地化。我正在使用以下脚本（现在大部分来自实际的 i18next 网站），但后端的导入会引发错误。

<script type="module">
import i18next from 'https://unpkg.com/i18next/dist/umd/i18next.min.js'
import Backend from 'https://cdn.jsdelivr.net/gh/i18next/i18next-http-backend/index.js';
import Middleware from 'http://cdn.jsdelivr.net/gh/i18next/i18next-http-middleware/index.js';
i18next
  .use(Backend)
  .init({
    backend: {
      // for all available options read the backend's repository readme file
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    lng: 'en',
    debug: true,
    }, function(err, t) {
    // init set content
    updateContent();
});

function updateContent() {
  document.getElementById('output').innerHTML = i18next.t('key');
}

function changeLng(lng) {
  i18next.changeLanguage(lng);
}

i18next.on('languageChanged', () => {
  updateContent();
});
</script>

错误：

getFetch.cjs:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "application/node". Strict MIME type checking is enforced for module scripts per HTML spec.

我什至不知道我是否正确导入了这些东西。我很感激任何帮助。谢谢你。

4

1 回答 1

0

没关系。我认为这是兼容性的问题。我试图加载一个 xhr 后端，继续尝试获取一个。似乎可以解决问题，并且似乎与大多数浏览器兼容。

更新： 好的，我成功解决了所有问题，但翻译本身不起作用。我要翻译的元素是空白的，即使控制台没有报告任何错误并且正确检测到 JSON。

这是html文档的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' lang='en-US'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title data-i18n="title">Zapněte Javascript</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='main.sass'>
        <!--<script src='main.js'></script>-->
    </head>
    <body>
        <nav>
            <ul>
                <li data-i18n="homepage"></li>
                <li data-i18n="about"></li>
                <li data-i18n="services"></li>
                <li data-i18n="projects"></li>
            </ul>
        </nav>
        <div>

        </div>
    </body>
</html>

<script type="module">
import i18next from 'https://cdn.jsdelivr.net/gh/i18next/i18next/src/index.js'
import locI18next from 'https://cdn.jsdelivr.net/gh/mthh/loc-i18next/src/main.js'
import Fetch from 'https://cdn.jsdelivr.net/gh/dotcore64/i18next-fetch-backend/src/index.js'
import Middleware from 'https://cdn.jsdelivr.net/gh/i18next/i18next-http-middleware/index.js'
import BackendAdapter from 'https://cdn.jsdelivr.net/gh/i18next/i18next-multiload-backend-adapter/src/index.js'


i18next.use(BackendAdapter).init({
    lng: 'cs',
    fallbackLng: 'en',
    ns: ['index'],
    debug: true,
    backend: {
      backend: Fetch,
      backendOption:{
        loadPath: 'translation.json?lng={{lng}}&ns={{ns}}',
        allowMultiLoading:  true,
        multiSeparator: '+',
      }
    }
});
const localize = async() => locI18next.init(i18next);
localize('[data-i18n]');
</script>

这是控制台报告的内容：

启用实时重新加载。logger.js:18 i18next::backendConnector: 为语言 cs 对象加载命名空间索引 logger.js:18 i18next::backendConnector: 为语言 en 对象加载命名空间索引 logger.js:18 i18next: languageChanged cs logger.js:18 i18next:初始化对象

我不知道怎么了。我很感激任何帮助。提前致谢。

于 2020-08-14T20:47:35.680 回答