PhoneGap中文网

标题: angular5配置服务器伪静态 [打印本页]
作者: tengfeng    时间: 2018-10-10 09:41
标题: angular5配置服务器伪静态
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

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

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

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


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

Internet Information Services (IIS)

  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








欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2