本文只用于记录经验，为节省时间用于举例的UI也许有点简陋。
1、导出json文件
安装file-saver
使用 npm install file-saver --save 安装 file-saver
使用file-saver
进入需要导出 json 文件的组件，使用 file-saver
<template><div class="hello"><button @click="exportJSON">导出json</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, 'ceshi.json');}}};</script>
点击按钮后，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 = this;reader.onload = function() {// this.result为读取到的json字符串，需转成json对象_this.ImportJSON = JSON.parse(this.result);// 检测是否导入成功console.log(_this.ImportJSON);};}}};</script>
真实项目中除了UI需要大概外，还需要注意添加异常处理等，请根据自己的项目需求更改，以上demo仅作基础功能参考。
