PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 694|回复: 0

angular5配置服务器伪静态

[复制链接]

28

主题

44

帖子

180

积分

注册会员

Rank: 2

积分
180
发表于 2018-10-10 09:41:52 | 显示全部楼层 |阅读模式
angular5中默认使用的是 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。


apche

  1. <IfModule mod_rewrite.c>
  2.   RewriteEngine On
  3.   RewriteBase /
  4.   RewriteRule ^index\.html$ - [L]
  5.   RewriteCond %{REQUEST_FILENAME} !-f
  6.   RewriteCond %{REQUEST_FILENAME} !-d
  7.   RewriteRule . /index.html [L]
  8. </IfModule>
复制代码
除了 mod_rewrite,你也可以使用 FallbackResource

nginx


  1. location / {
  2.   try_files $uri $uri/ /index.html;
  3. }
复制代码


原生 Node.js

  1. const http = require('http')
  2. const fs = require('fs')
  3. const httpPort = 80

  4. http.createServer((req, res) => {
  5.   fs.readFile('index.htm', 'utf-8', (err, content) => {
  6.     if (err) {
  7.       console.log('We cannot open "index.htm" file.')
  8.     }

  9.     res.writeHead(200, {
  10.       'Content-Type': 'text/html; charset=utf-8'
  11.     })

  12.     res.end(content)
  13.   })
  14. }).listen(httpPort, () => {
  15.   console.log('Server listening on: http://localhost:%s', httpPort)
  16. })
复制代码


基于 Node.js 的 Express对于 Node.js/Express,请考虑使用 connect-history-api-fallback 中间件

Internet Information Services (IIS)
  • 安装 IIS UrlRewrite
  • 在你的网站根目录中创建一个 web.config 文件,内容如下:


  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <configuration>
  3.   <system.webServer>
  4.     <rewrite>
  5.       <rules>
  6.         <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
  7.           <match url="(.*)" />
  8.           <conditions logicalGrouping="MatchAll">
  9.             <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  10.             <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  11.           </conditions>
  12.           <action type="Rewrite" url="/" />
  13.         </rule>
  14.       </rules>
  15.     </rewrite>
  16.   </system.webServer>
  17. </configuration>
复制代码






其他web服务器配置angular伪静态参考:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2018-12-19 02:01 , Processed in 0.300099 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表