angular5配置服务器伪静态

tengfeng

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. 
   
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.     }
   
10. 
    
11.     res.writeHead(200, {
    
12.       'Content-Type': 'text/html; charset=utf-8'
    
13.     })
    
14. 
    
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)

• 安装 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