我相信我已经搜索了互联网的所有部分来寻找答案和修复,但似乎都不起作用。
问题:
构建使用 i18n 作为翻译的 React 应用程序时,将导致生产版本仅显示字符串作为结果,而不显示翻译后的文本本身(参见图片参考)
构建生产版本后,在浏览器控制台(使用 chrome)内显示以下错误:
Fetch API cannot load file:///Documents/streaming_site/build/static/locales/en/translation.json. URL scheme must be "http" or "https" for CORS request.
看到此错误后,我立即假设它是在我的
i18next.js
文件中导致了问题。这是文件:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';
// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init
const Languages = ['en', 'fr'];
i18n
.use(XHR)
// load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
// learn more: https://github.com/i18next/i18next-http-backend
.use(Backend)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
lng : 'en',
react: {
useSuspense: false,
wait: true
},
fallbackLng: 'en',
debug: false,
whitelist: Languages,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
nsSeperator : false,
keySeperator : false,
backend:{
loadPath: () => {
var cors = require('cors');
var app = cors();
// check the domain
const host = window.location.host;
return (host === 'index.html#' ? '':'') + '/static/locales/{{lng}}/{{ns}}.json';
},
}
});
export default i18n;
此外,在我的
index.js
文件中,我添加了这些额外的修复程序,以确保应用程序能够在生产版本上正确显示翻译后的文本:
i18next.init({// <-- This was added
interpolation: {escapeValue: false},
});
i18next.init().then(() => // <-- This was added
ReactDOM.render(
<React.StrictMode>
<Suspense fallback={<div>Loading...</div>}>// <-- This was added
<I18nextProvider i18n={i18next}>// <-- This was added
<App />
</I18nextProvider>
</Suspense>
</React.StrictMode>,
document.getElementById('root')
)
);
唉,在进行了
npm run build
之后又出现了同样的错误(第三点中的错误)
这让我相信,如果没有后端服务器托管 en 和 fr 的
translation.json
文件,就不可能在本地访问它们。
我的问题如下:是否可以在构建生产版本后在本地运行 i18n 翻译,而不需要服务器来托管 json 文件?如果是的话我该如何进行?
作为参考,我尝试了该网站的一些修复,例如:
当我尝试时,我已经接近了 -->
res.header('Access-Control-Allow-Origin', "*");
,尽管这是以提出一些安全问题为代价的,而我不希望这样。尽管如果这是一个潜在的解决方案,我愿意尝试一下。
所以我没有主意了......:/
看起来 i18next 服务配置有误。
首先,
i18next-http-backend
和i18next-xhr-backend
正在解决同样的问题,获取json文件。
删除第二个 (
i18next-xhr-backend
),因为它已被弃用,取而代之的是 i18next-http-backend
。
将
backend.loadPath
更改为字符串,您的代码没有意义。
它应该看起来像:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init
const Languages = ['en', 'fr'];
i18n
.use(Backend)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
lng: 'en',
react: {
useSuspense: false,
wait: true,
},
fallbackLng: 'en',
debug: false,
whitelist: Languages,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
nsSeperator: false,
keySeperator: false,
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
});
export default i18n;
检查您对“locales/”路径的权限,如果您使用的是Web服务器,例如nginx,那么它可能无权访问该目录
sudo chmod -R 755 /var/www/html/locales
sudo chown -R www-data:www-data /var/www/html/locales