angular i18n 应用程序的 Nginx 配置 [英] Nginx configuration for angular i18n application
问题描述
我使用 i18n 构建了一个支持法语和英语的 angular-5 应用程序.然后我为每种支持的语言部署了一个单独的应用版本
<前>- 区|___ zh/||__ index.html|___ fr/|__ index.html我还添加了以下 nginx 配置来为两种语言的应用程序提供服务;
<前>服务器 {根/var/www/dist;index index.html index.htm;server_name host.local;位置 ^/(fr|en)/(.*)$ {try_files $2 $2//$1/index.html;}}我想做的是为这两个应用程序提供服务,并允许在英文和法文版本之间切换.
比如说我在 host.local/en/something
如果我切换到 host.local/fr/something
我应该得到something"页面的法语版本.
使用我共享的 nginx 配置,我在浏览应用程序时每次刷新页面时都会收到 404 not found 错误,这也阻止我独立浏览我的应用程序并在它们之间切换.
我错过了什么?什么是合适的 Nginx 配置来实现这一点?
我在 iis 上做了同样的事情,首先你必须使用base-href"选项构建你的应用程序:
ng build --output-path=dist/fr --prod --bh/fr/ng build --output-path=dist/en --prod --bh/en/
对于 nginx 使用这个配置
location/fr/{别名/var/www/dist/fr/;try_files $uri$args $uri$args//fr/index.html;}位置/en/{别名/var/www/dist/en/;try_files $uri$args $uri$args//en/index.html;}
为了从/en/someroute 导航到/fr/someroute ,您可以在具有语言切换器的组件中获取当前路由器 URL
getCurrentRoute() {返回 this.router.url;}
当点击语言选择器时,您会重定向到与所选语言相同的路由:
<li *ngFor="let 语言的语言;let i=index" ><a href="/{{language.lang}}/#{{getCurrentRoute()}}" (click)="changeLanguage(language.lang)">{{语言.lang}}</a>
更改语言方法
changeLanguage(lang: string) {const langs = ['en', 'fr'];this.languages = this.allLanguages.filter((language) => {返回 language.lang !== lang;});this.curentLanguage = this.allLanguages[langs.indexOf(lang)].namelocalStorage.setItem('语言', lang);如果(isDevMode()){location.reload(true);}}
I built an angular-5 application using i18n that supports both french and english. I then deployed a separate version of the app for each supported language
- dist |___ en/ | |__ index.html |___ fr/ |__ index.html
I also added the following nginx configuration to serve the application in both languages;
server { root /var/www/dist; index index.html index.htm; server_name host.local; location ^/(fr|en)/(.*)$ { try_files $2 $2/ /$1/index.html; } }
What I wanted to do is to serve both applications and allow switching between the english and the french version.
Let's say for example I'm on host.local/en/something
if I switch to host.local/fr/something
I should get the french version of the "something" page.
With the nginx configuration I shared, I get a 404 not found error every time I refresh pages when browing my apps which also prevents me from browsing my apps independently from one another and switching between them.
What did I miss? What's the appropriate Nginx conf to achieve that?
i've done the same thing on iis, first you have to build your app with "base-href" option:
ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/
and for nginx use this config
location /fr/ {
alias /var/www/dist/fr/;
try_files $uri$args $uri$args/ /fr/index.html;
}
location /en/ {
alias /var/www/dist/en/;
try_files $uri$args $uri$args/ /en/index.html;
}
and for navigation from /en/someroute to /fr/someroute , you can get the current router url in your component where you have the language switcher
getCurrentRoute() {
return this.router.url;
}
and when click on a language selector you redirect to the same route with the selected language :
<li *ngFor="let language of languages;let i=index" >
<a href="/{{language.lang}}/#{{getCurrentRoute()}}" (click)="changeLanguage(language.lang)">
{{language.lang}}
</a>
</li>
change language method
changeLanguage(lang: string) {
const langs = ['en', 'fr'];
this.languages = this.allLanguages.filter((language) => {
return language.lang !== lang;
});
this.curentLanguage = this.allLanguages[langs.indexOf(lang)].name
localStorage.setItem('Language', lang);
if (isDevMode()) {
location.reload(true);
}
}
这篇关于angular i18n 应用程序的 Nginx 配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!