项目名称的英文缩写怎么写的（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 
 
 
 
 
 
 
 
、检查下组件代码是否有语法问题