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

標籤：變化   bubuko   問題：   build   報錯資訊   目錄   項目   後台   http   

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

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

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

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

[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

然後在瀏覽器開啟  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檔案在打包後路徑出錯問題