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、检查下组件代码是否有语法问题