vue 項目中使用axios請求了本地項目的static文件夾下的json文件，使用npm run build 打包後，在Hbuilder編輯器打開，頁面報錯404：

在瀏覽器打開的路徑 http://127.0.0.1:8020/poverty/dist/index.html

我們可以看到index.html前面還有兩個文件層級，也就是說json文件的路徑已經發生變化，而不是原來開發環境下的路徑了。

下面我們使用 http-server來解決這個問題：

dell@DESKTOP-KD0EJ4H MINGW64 /f/05 poverty alleviation project/poverty/dist
$ npm install http-server -g
 

D:\nodejs\node_global\http-server -> D:\nodejs\node_global\node_modules\http-server\bin\http-server
D:\nodejs\node_global\hs -> D:\nodejs\node_global\node_modules\http-server\bin\http-server
+ [email protected]
updated 1 package in 6.234s

dell@DESKTOP-KD0EJ4H MINGW64 /f/05 poverty alleviation project/poverty/dist
$ http-server
 

Starting up http-server, serving ./
Available on:
  http://192.168.80.117:8081
  http://127.0.0.1:8081
Hit CTRL-C to stop the server

然後在瀏覽器打開 http://127.0.0.1:8081 即可正常打開項目首頁內容，並且之前的報錯信息也沒有了。

那麽什麽是 http-server，使用它有什麽用呢？

1. 作為前端的同學來說，想要運行一段代碼，但又沒有必要使用tomcat或是Apache http server,這個時候，一個簡單的輕量的http-server就能搞定。

2. 當前端開發完成後，需要我們打包部署，此時一般就會生成一個dist文件夾，裏面存放的是一些靜態文件，當我們在編輯器裏直接運行這些靜態文件時，很可能會出現“because its MIME type (‘text/html‘) is not a supported stylesheet MIME type, and strict MIME checking is enabled.”這類的關於MIME type的錯誤，還有就是上面出現的路徑問題，這些錯誤是因為靜態文件訪問限制導致的，此時就可以使用http-server來搞定。

3. 可以使靜態資源文件的任意一個目錄成為服務器的目錄，完全拋開後臺的沈重工作，直接運行你想要的代碼

解決axios請求本地的json文件在打包後路徑出錯問題