美文网首页vue与react
vue框架下部署上线后刷新报404问题解决方案

vue框架下部署上线后刷新报404问题解决方案

作者: 王一诺Eno | 来源:发表于2019-04-02 09:35 被阅读128次

    @TOC

    Apache配置

    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
    </IfModule>
    

    nginx配置

    location / {
      try_files $uri $uri/ /index.html;
    }
    

    vue history模式下nginx配置

    服务端nginx的一开始配置如下(假设域名为:xx.xxx.com):
    [***** ~]# cat /Data/app/nginx/conf/vhosts/xx.xxx.com.conf

     server {
             listen 80;
    
             server_name testwx.wangshibo.com;
             root /Data/app/xqsj_wx/dist;
             index index.html;
    
             access_log /var/log/testwx.log main;
    
    }
    

    修改如下:

    server {
             listen 80;
    
             server_name testwx.wangshibo.com;
             root /Data/app/xqsj_wx/dist;
             index index.html;
             access_log /var/log/testwx.log main;
             
            ## 注意从这里开始
             location / {
                 try_files $uri $uri/ @router;
                 index index.html;
             }
    
            location @router {
                rewrite ^.*$ /index.html last;
            }
    
    }
    

    原生 Node.js

    const http = require('http')
    const fs = require('fs')
    const httpPort = 80
    
    http.createServer((req, res) => {
      fs.readFile('index.htm', 'utf-8', (err, content) => {
        if (err) {
          console.log('We cannot open "index.htm" file.')
        }
    
        res.writeHead(200, {
          'Content-Type': 'text/html; charset=utf-8'
        })
    
        res.end(content)
      })
    }).listen(httpPort, () => {
      console.log('Server listening on: http://localhost:%s', httpPort)
    })
    

    基于 Node.js 的 Express

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

    Internet Information Services (IIS)

    1. 安装 IIS UrlRewrite
    2. 在你的网站根目录中创建一个 web.config 文件,内容如下:
    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
     <system.webServer>
       <rewrite>
         <rules>
           <rule name="Handle History Mode and custom 404/500" 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="/" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
    </configuration>
    

    Caddy

    rewrite {
        regexp .*
        to {path} /
    }
    

    Firebase 主机

    在你的 firebase.json 中加入:

    {
      "hosting": {
        "public": "dist",
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }
    

    最后

    给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

    const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '*', component: NotFoundComponent }
      ]
    })
    

    相关文章

      网友评论

        本文标题:vue框架下部署上线后刷新报404问题解决方案

        本文链接:https://www.haomeiwen.com/subject/mthwbqtx.html