Javascript Reactjs-加载翻译文件时出错
我一直在尝试启动一个新的react项目来练习一些技能 最近我尝试添加国际化和本地化,通过添加Javascript Reactjs-加载翻译文件时出错,javascript,reactjs,typescript,webpack,react-i18next,Javascript,Reactjs,Typescript,Webpack,React I18next,我一直在尝试启动一个新的react项目来练习一些技能 最近我尝试添加国际化和本地化,通过添加react-i18next和i18next 只需遵循上提供的分步指南并添加我的翻译文件 但是当我运行这个项目时,我得到了控制台错误gethttps://localhost:8080/locales/en/generic.json 404(未找到) 起初我认为项目缺少一个json加载程序,所以我添加到webpack.config.js,但结果是一样的。我检查了一下路,似乎一切都好 提前谢谢 i18n文件 i
react-i18next
和i18next
只需遵循上提供的分步指南并添加我的翻译文件
但是当我运行这个项目时,我得到了控制台错误gethttps://localhost:8080/locales/en/generic.json 404(未找到)
起初我认为项目缺少一个json加载程序
,所以我添加到webpack.config.js
,但结果是一样的。我检查了一下路,似乎一切都好
提前谢谢
i18n文件
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const fallbackLng = ["pt"];
const availableLanguages = ["pt", "en"];
const backendOptions = {
loadPath: "/locales/{{lng}}/{{ns}}.json",
crossDomain: true
};
i18n
// load translation using http
.use(Backend)
// detect user language
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
.init({
backend: backendOptions,
fallbackLng,
detection: {
checkWhitelist: true,
},
whitelist: availableLanguages,
interpolation: {
escapeValue: false // react already safes from xss
},
ns: [
"generic"
],
defaultNS: "generic",
});
export default i18n;
import './i18n';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
const App: React.FC = React.memo(() => {
return (
<AppContainer>
<I18nextProvider i18n={i18n}>
<Router>
<React.Suspense fallback={<div>Loading...</div>}>
<MainContainer />
</React.Suspense>
</Router>
</I18nextProvider>
</AppContainer>
)
});
ReactDOM.render(<App />, document.getElementById('root'))
根文件
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const fallbackLng = ["pt"];
const availableLanguages = ["pt", "en"];
const backendOptions = {
loadPath: "/locales/{{lng}}/{{ns}}.json",
crossDomain: true
};
i18n
// load translation using http
.use(Backend)
// detect user language
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
.init({
backend: backendOptions,
fallbackLng,
detection: {
checkWhitelist: true,
},
whitelist: availableLanguages,
interpolation: {
escapeValue: false // react already safes from xss
},
ns: [
"generic"
],
defaultNS: "generic",
});
export default i18n;
import './i18n';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
const App: React.FC = React.memo(() => {
return (
<AppContainer>
<I18nextProvider i18n={i18n}>
<Router>
<React.Suspense fallback={<div>Loading...</div>}>
<MainContainer />
</React.Suspense>
</Router>
</I18nextProvider>
</AppContainer>
)
});
ReactDOM.render(<App />, document.getElementById('root'))
所以我认为o发现了一个解决方案 我所做的就是添加
复制网页插件
,并将以下代码放入我的网页文件中
const common = {
...
plugins: [
...
new CopyPlugin([
{ from: "./src/locales", to: "locales" },
]),
]
}