angular 前端路由不生效解决方案
<h1 id="angular-前端路由不生效解决方案">angular 前端路由不生效解决方案</h1><h2 id="intro">Intro</h2>
<p>最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端，在部署上遇到了一个问题，前端路由不生效，这里记录一下。本地开发正常，但是部署到服务器上就有问题，之前部署到IIS上时需要配置一个 url rewrite ，可能遇到了类似的问题，查阅一番之后确实是这样。</p>
<h2 id="启用前端路由服务器配置">启用前端路由服务器配置</h2>
<p>没有一种配置可以适用于所有服务器。 后面这些部分会描述对常见服务器的配置方式。 这个列表虽然不够详尽，但可以为你提供一个良好的起点。</p>
<ul>
<li>Apache：在 <code>.htaccess</code> 文件中添加一个重写规则， 代码如下（出处）：</li>
</ul>
<pre><code>RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ -
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
</code></pre>
<ul>
<li>NGinx：使用 <code>try_files</code> 指向 <code>index.html</code>，详细描述见Web 应用的前端控制器模式。</li>
</ul>
<pre><code>try_files $uri $uri/ /index.html;
</code></pre>
<ul>
<li>IIS：往 <code>web.config</code> 中添加一条重写规则，类似于这里：</li>
</ul>
<pre><code class="language-xml"><system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</code></pre>
<ul>
<li>
<p>GitHub 页面服务：你没办法直接配置 Github 的页面服务，但可以添加一个 404 页，只要把 <code>index.html</code> 复制到 <code>404.html</code> 就可以了。 它仍然会给出一个 404 响应，但是浏览器将会正确处理该页，并正常加载该应用。 使用在主分支的 <code>docs/</code> 下启动服务 并创建一个 <code>.nojekyll</code> 文件也是一个好办法。</p>
</li>
<li>
<p>Firebase 主机服务：添加一条重写规则。</p>
</li>
</ul>
<pre><code>"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
</code></pre>
<h2 id="docker-部署">Docker 部署</h2>
<p>我使用了 Docker 部署，最后部署在 nginx 下了，按上面的提示在 nginx 配置中配置 <code>try file</code>，修改 nginx 默认配置文件如下：</p>
<pre><code>server {
listen 80;
server_namelocalhost;
location / {
root /usr/share/nginx/html;
indexindex.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504/50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
</code></pre>
<p>在打包 docker 镜像时替换默认的 nginx 配置，Dockerfile 如下所示：</p>
<pre><code>FROM node:12-alpine AS builder
# set working directory
WORKDIR /app
# install and cache app dependencies
COPY package.json .
RUN npm install
# build the angular app
COPY . .
RUN npm run build
FROM nginx:alpine
# copy from dist to nginx root dir
COPY --from=builder /app/dist/ReservationClient /usr/share/nginx/html
# expose port 80
EXPOSE 80
# set author info
LABEL maintainer="WeihanLi"
COPY ./conf/nginx.default.conf /etc/nginx/conf.d/default.conf
# run nginx in foreground
# https://stackoverflow.com/questions/18861300/how-to-run-nginx-within-a-docker-container-without-halting
CMD ["nginx", "-g", "daemon off;"]
</code></pre>
<p>按上面的 Dockerfile 打包之后前端路由就可以正常使用了~~</p>
<p>我的 angular 做的活动室预约客户端体验地址：https://reservation-preview.weihanli.xyz/</p>
<h2 id="reference">Reference</h2>
<ul>
<li>https://angular.cn/guide/deployment#server-configuration</li>
<li>https://angular.io/guide/deployment#server-configuration</li>
<li>https://github.com/WeihanLi/ActivityReservation/tree/dev/ActivityReservation.Clients/ReservationClient</li>
</ul>
</div>
<div id="MySignature" role="contentinfo">
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。<br><br>
来源：https://www.cnblogs.com/weihanli/p/fix-angular-frond-end-route.html
頁:
[1]