We're sorry but (project name) doesn't work properly without JavaScript enabled/Vue routing history mode jump error 404--solution

Problems encountered : local development environment, the project is created by vue-cli, the status of the access interface is 200, but the data is not returned correctly, and the returned information prompts "We're sorry but example doesn't work properly without JavaScript enabled. Please enable it to continue.”

 Searching globally found that there is an identical sentence in index.html in the packaged dist directory  , indicating that the request returned the index page;

After some searching on the Internet, it may be that the server configuration is incorrect, and the path to be requested is not matched. If it is in the development stage (run npm run serve), check the proxy devServer.proxy, if it is in the test environment or production environment, check nginx, or Apache and other servers;

For example, the path of the HTTP request is /login, first check the location in the nginx.conf file to see if the forwarding of /login is configured. If it is configured, check whether there is a wrong match. Multiple "/" and less "/" may cause the regular pattern to not match;

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模式不需要。
        }
    }

If the route of vue is in history mode, the home page can be accessed, but when other pages are accessed, an error 404 is reported when refreshing, you can add the following code in the location, that is, the root path starts as the starting path, and the first index.html is found as Initialize the page, if you can't find it, go to the next level directory to find it.**

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

If the server is written in node.js, it is recommended to use an intermediate library: connect-history-api-fallback

After searching on the npm official website, you can download it on the server and use it to solve the 404 problem

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

The following is a summary of the methods of referring to other bloggers:

1. Mode type
Front-end modification method: change the mode type from history to hash;
back-end modification method: mode or history, configure nginx at the back-end, and set the mapping relationship

2. publicpath path problem
publicpath requires an absolute path '/'

3. Local development, service agent information
Check whether the agent information is correct, whether there are multiple agents written

4. Check whether the component code has syntax problems

---