此文章用于記錄經驗，方便下次借鑒，為節省時間用于舉例的UI也許有點簡陋，將就將就…重要的是方法。

1、導出json文件

1.1、安裝file-saver

使用cnpm install file-saver --save安裝file-saver

1.2、使用file-saver
進入需要導出json文件的組件，使用file-saver

<template><div class="hello"><button @click="exportJSON">導出jsonn</button></div> </template><script> import FileSaver from 'file-saver' export default {data () {return {// 待導出的json數據CfgInfo: {CAN: {Chn: 0,name: 'CAN通道'},LIN: {Chn: 1,name: 'LIN通道'}}}},methods: {exportJSON () {// 將json轉換成字符串const data = JSON.stringify(this.CfgInfo)const blob = new Blob([data], {type: ''})FileSaver.saveAs(blob, 'hahaha.json')}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

點擊按鈕后，json文件將被導成你設置的文件（谷歌瀏覽器會默認下載到默認地址，不會彈框，ie、360等會彈框讓你選擇保存地址），如下：

2、導入JSON文件

在導出邏輯上添加了導入邏輯后的代碼：

<template><div class="hello"><button @click="exportJSON">導出jsonn</button><div><input id="file" type="file" accept=".json"/><button @click="importJSON">導入json</button></div></div> </template><script> import FileSaver from 'file-saver' export default {data () {return {// 待導出的json數據CfgInfo: {CAN: {Chn: 0,name: 'CAN通道'},LIN: {Chn: 1,name: 'LIN通道'}},// 將導入的json保存在這個對象下ImportJSON: {}}},methods: {// 導出jsonexportJSON () {// 將json轉換成字符串const data = JSON.stringify(this.CfgInfo)const blob = new Blob([data], {type: ''})FileSaver.saveAs(blob, 'hahaha.json')},// 導入jsonimportJSON () {const file = document.getElementById('file').files[0]const reader = new FileReader()reader.readAsText(file)const _this = thisreader.onload = function () {// this.result為讀取到的json字符串，需轉成json對象_this.ImportJSON = JSON.parse(this.result)// 檢測是否導入成功console.log(_this.ImportJSON)}}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

選擇之前導出的文件后，點擊導入，可見控制臺輸入了導入的json值，如下：

真實項目中除了UI需要大概外，還需要注意添加異常處理等，請根據自己的項目需求更改，以上demo僅作基礎功能參考。

總結

以上是生活随笔為你收集整理的Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。