【VueJS】VueJS開發請求本地json數據的配置


VueJS開發請求本地json數據的配置,舊版本是build/dev-server.js,新版本是build/webpack.dev.conf.js。

 

VueJS開發請求本地json數據的配置,早期的vue-lic下面有dev-server.js和dev-client.js兩文件,請求本地數據在dev-server.js里配置,最新的vue-webpack-template中已經去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以配置本地訪問在webpack.dev.conf.js里配置即可。

 

1. 舊版dev-server.js配置本地數據訪問:

在const app = express()后,const compiler = webpack(webpackConfig)前配置即可。

 

2. 新版webpack.dev.conf.js配置本地數據訪問:

在const portfinder = require(‘portfinder’)后添加

 

有的小伙伴配置后說不能訪問,所有的修改配置都需要重新啟動運行命令的:npm run dev才能生效,還有data.json數據也不能少,就放在根目錄下與index.html同級。data.json的部分數據如下所示:

 

3. 訪問本地接口

按照上面的步驟配置后就可以正確訪問本地接口了。

http://localhost:8080/api/seller

 

http://localhost:8080/api/goods

 

 

http://localhost:8080/api/ratings

 

這是我們雖然得到正確的數據了,但是因為數據不是格式化的,看起來有些麻煩,我們可以安裝Google的jsonview插件(我用的是Google瀏覽器),安裝成功后即可格式化json數據

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM