成都网站建设设计

将想法与焦点和您一起共享

vue打包刷新报错如何解决

本篇内容主要讲解“vue打包刷新报错如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue打包刷新报错如何解决”吧!

创新互联专注于龙华网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供龙华营销型网站建设,龙华网站制作、龙华网页设计、龙华网站官网定制、微信小程序定制开发服务,打造龙华网络公司原创品牌,更为您提供龙华网站排名全网营销落地服务。

vue打包刷新报错的解决办法:1、将vue router的“mode”改成“hash”;2、修改Nginx为“location / {root ...index ...try_files $uri $uri/ /index.html;}”;3、修改Apache为“RewriteRule . /index.html [L]”并保存即可。

vue项目部署后刷新报404 解决方法

一、原因

因之前vue搭建的项目的vue router  mode 使用的默认模式hash,项目打包部署后刷新页面不会出现404这种情况

但是因项目需求把vue router 的mode改成了history,结果跳转页面没问题,刷新页面的时候报404错误

二、解决方案:

方案一:vue router 的mode改成hash

方案二:nginx修改

location / {
  root ...
  index ...
  try_files $uri $uri/ /index.html; ---解决页面刷新404问题
} 

如图:

vue打包刷新报错如何解决

警告:

因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果你是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback。

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

方案三:Apache


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

到此,相信大家对“vue打包刷新报错如何解决”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


网站名称:vue打包刷新报错如何解决
本文地址:http://chengdu.cdxwcx.cn/article/jehegg.html