The Vue project uses Axios to request a JSON file under the static folder of the local project, which is packaged with NPM run build and opened in the Hbuilder editor with Error 404 on the page:
The path opened in the browser http://127.0.0.1:8020/poverty/dist/index.html
We can see that there are two file levels in front of index.html, which means that the path to the JSON file has changed, not the path in the original development environment.
Below we use Http-server to solve this problem:
[Email protected] MINGW64/F/05 poverty alleviation Project/poverty/dist$ npm Install http-server-gD:\nodejs\node_global\ Http-server, D:\NODEJS\NODE_GLOBAL\NODE_MODULES\HTTP-SERVER\BIN\HTTP-SERVERD:\NODEJS\NODE_GLOBAL\HS, D:\ nodejs\node_global\node_modules\http-server\bin\http-server+ [Email protected]updated 1 package in 6.234s[email Protected] mingw64/f/05 poverty alleviation Project/poverty/dist$ http-serverstarting up Http-server, serving ./available on: http://192.168.80.117:8081 http://127.0.0.1:8081Hit ctrl-c to stop the server
Then open the http://127.0.0.1:8081 in the browser to open the project first page content, and the previous error message is not available.
So what is http-server and what is the use of it?
1. As a front-end classmate, want to run a piece of code, but there is no need to use Tomcat or Apache HTTP server, this time, a simple light-weight http-server can be done.
2. After the development of the current end, we need to package the deployment, this time will generally generate a dist folder, which is stored in some static files, when we run these static files in the editor, it is likely to appear "because its MIME type (' text/html ') Is isn't a supported stylesheet MIME type, and strict MIME checking is enabled. " This kind of error about MIME type, there is the above path problem, these errors are caused by the static file access restrictions, you can use Http-server to take care of.
3. You can make any directory of the static resource files into the directory of the server, completely throw away the heavy work in the background, directly run the code you want
Fix Axios request local JSON file after package path error problem