vue框架下部署上线后刷新报404问题怎么办

这篇文章主要介绍vue框架下部署上线后刷新报404问题怎么办，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

<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)

安装 IIS UrlRewrite

在你的网站根目录中创建一个 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问题怎么办”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！