我已经搜索了很多帖子而没有运气来解决我的构建问题。
我有两个主要问题
结构如下:
my-app
public
images
image.jpg
locale
xx
xxx.json
src
和url(/images/image.jpg)
这样的背景图片网址,
url在dev上运行良好,但是在生产/构建之后,它相对于/
路径,无论homepage
中设置的package.json
如何
区域设置文件也是如此。
PS:homepage
不会是/
,让我们说它将是/myapp/
我的i18n文件是这样的:
i18n
use(Backend)
我试图将后端设置设置为任何东西(__dirname | env.PUBLIC_URL,...etc
),但没有任何工作。
这似乎是一个非常普遍的问题,因为我发现它上面有很多帖子,但是,在运行npm run build
时如何正确设置相对路径没有明确的答案
如果你有这方面的知识,请给出一个逐步指导的假人答案。
我已设法使用以下设置使其工作:
结构体:
├── public
| ├── locales
| ├── ar
| | ├── errors.json
| | ├── general.json
| | └── warnings.json
| ├── en
| | ├── errors.json
| | ├── general.json
| | └── warnings.json
├── src
| ├── App.js
| ├── i18n.js
i18n.js
import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
// load translation using xhr -> see /public/locales
.use(Backend)
// detect user language
.use(LanguageDetector)
.init({
fallbackLng: 'en',
debug: false,
defaultNS: 'general',
ns: ['general', 'errors', 'warnings'],
backend: {
loadPath: `${window.location.pathname}locales/{{lng}}/{{ns}}.json`
},
load: 'unspecific',
// special options for react-i18next
// learn more: https://react.i18next.com/components/i18next-instance
react: {
wait: true
}
});
export default i18n;
零件
每个组件都包含名称空间(除了'defaultNS
'配置之外)
class MyComponent extends React.Component{...}
export default withNamespaces('general', 'errors')(MyComponent)