1987WEB视界-分享互联网热点话题和事件

您现在的位置是:首页 > WEB开发 > 正文

WEB开发

We’re sorry but (项目名称) doesn’t work properly without JavaScript enabled/Vue路由history模式跳转报错404--解决方案

1987web2024-03-25WEB开发30
遇到的问题:本地开发环境,项目是vue-cli创建的,访问接口状态为200,但没有正确返回数据,返回信息提示为“We’resorrybutexampledoesn’

遇到的问题:本地开发环境,项目是vue-cli创建的,访问接口状态为200,但没有正确返回数据,返回信息提示为“We’re sorry but example doesn’t work properly without JavaScript enabled. Please enable it to continue.”

搜索全局发现打包之后的dist目录下index.html中有一句一模一样的文字,说明请求返回了index页面;

网上搜索一番发现,可能是server配置不对,没有匹配到要请求的路径。如果是开发阶段(运行npm run serve)检查一下代理devServer.proxy ,如果是在测试环境或者生产环境,检查nginx,或者Apache等server;

例如http请求的路径是 /login,首先检查nginx.conf文件中的location,是否配置了/login的转发。如果配置了,检查是否配错了,多个“/”少个”/”都可能导致正则匹配不到;

server{listen8080;server_name localhost;location~^/(oauth|login|user|api){proxy_http_version1.1;proxy_pass http://xxxxxx:8080;# 这是后端接口的地址,http见到oauth开头,login开头等都会跳转到这里#设置允许跨域add_headerAccess-Control-Allow-Origin*;add_headerAccess-Control-Allow-Methods"POST, GET, DELETE, OPTIONS";add_headerAccess-Control-Allow-Headers"Origin, Authorization, Accept";add_headerAccess-Control-Allow-Credentialstrue;}location/{root/usr/dev/project/fe/test;# index index.html index.htm;try_files $uri $uri//index.html;#这里是history路由模式,需要加,如果是hash模式不需要。}}

如果vue的路由是history模式,主页可以访问,但是其他页面访问时刷新时报错404,可以在location里面加上下面的代码,即root的路径开始作为起始路径,找到第一个index.html作为初始化页面,如果找不到,就往下一级目录找.**

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

如果服务器是用node.js写的,那么推荐使用中间库:connect-history-api-fallback

在npm官网搜索之后在服务器下载即可引入使用解决404问题

//引入consthistory=require(connect-history-api-fallback);//使用app.use(history());

下面为参考其他博主的方法汇总:

1、mode类型前端修改方式:将mode类型由history改成hash;后端修改方式:mode还是history,后端配置nginx,设置映射关系

2、publicpath路径问题publicpath需要绝对路径’/’

3、本地开发,服务代理信息检查代理信息是否有误,是否写有多个代理

4、检查下组件代码是否有语法问题

声明:本站所有文章,如无特殊说明或标注,均为爬虫抓取以及网友投稿,版权归原作者所有。