vue 增加js日志输出文件_Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考...

本文只用于记录经验，为节省时间用于举例的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: {
        // 导出json
        exportJSON() {
            // 将json转换成字符串
            const data = JSON.stringify(this.CfgInfo);
            const blob = new Blob([data], { type: '' });
            FileSaver.saveAs(blob, 'hahaha.json');
        },
        // 导入json
        importJSON() {
            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仅作基础功能参考。