项目名称的英文缩写怎么写的（We’re sorry but （项目名称） doesn’t work properly without JavaScript enabled/Vue路由history模式跳转报错404–解决方案）

遇到的问题：本地开发环境          ，项目是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{ listen 8080; server_name localhost; location ~^/(oauth|login|user|api) { proxy_http_version 1.1; proxy_pass http://xxxxxx:8080; # 这是后端接口的地址               ，http见到oauth开头 
 
 
 
 
 
 
 
 
 
 ，login开头等都会跳转到这里 #设置允许跨域 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods "POST, GET, DELETE, OPTIONS"; add_header Access-Control-Allow-Headers "Origin, Authorization, Accept"; add_header Access-Control-Allow-Credentials true; } 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问题

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

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

1 
  
  
  
  
  、mode类型

前端修改方式：将mode类型由history改成hash；

后端修改方式：mode还是history
 

 

 

 

 

，后端配置nginx          ，设置映射关系

2
  
  
  
  
  
、publicpath路径问题

publicpath需要绝对路径’/’

3
 


 


 


 


 

、本地开发 

 
 

 
 

 
 

 
 

 
 ，服务代理信息

检查代理信息是否有误










，是否写有多个代理

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