vue写入json数据到文本中+vue引入cdn的用法

需求：省市区的json数据，然后因为要在数据中区中添加 全某某市的数据，通过遍历其实可以做到不用改json文本的数据，但是以前没有弄过写入文本的数据，就想试着做一下。

1.在vue中引入FileSaver.js 插件，通过cdn的方式

1.首先在 index.html 文件中引入插件

<script  src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>

2.在vue.config.js中进行配置，格式为'aaa':'bbb',aaa表示要引入资源的名字，bbb表示要导出给外部引用的名字，由对应的库自己定，例如，vue 为 Vue，vue-router 为 VueRouter

现在启动项目 报错 没找到原因，不知道为什么，希望有人能给解决一下 错误图片

 externals:{
    'FileSaver':'FileSaver'
  },

2.js读json文件：

<div>
 <input type="file" id="files" @click="writer">
</div>
<script>
writer(){
      // console.log(area)
      var writeFiles = document.getElementById('files')
      // console.log(writeFiles)
    writeFiles.addEventListener('change',function(){
          var files1 = writeFiles.files[0]
          // console.log(files1)  // => 图一
          var reader = new FileReader()
          reader.readAsText(files1)
          reader.onload = function() {
            // console.log(this.result) // => 图二
            let data = JSON.parse(this.result) // 这边JSON.parse，导入文件应为json文件
            // console.log(data) // => 图三
            data.forEach(item => {
              item.children.forEach(dis => {
                // console.log(dis)
                dis.children.unshift({
                  label:`全${dis.label}`,
                  value:dis.value
                })
              })
            })
            // console.log(JSON.stringify(data)) // => 图四
            this.data = data
            // console.log(this.data)
          }
      },false)
</script>

图一
图二
图三
图四

3.js写json文件：

<div>
 <input type="button" id="export" value="保存">
</div>
<script>
var button = document.getElementById('export')
      button.addEventListener('click',function() {
        var files1 = writeFiles.files[0]
        var reader = new FileReader()
        reader.readAsText(files1)
        reader.onload = function() {
            // console.log(this.result) // => 图一
            var data1 = JSON.parse(this.result)
            // console.log(data) // => 图二
            data1.forEach(item => {
              item.children.forEach(dis => {
                // console.log(dis)
                dis.children.unshift({
                  label:`全${dis.label}`,
                  value:dis.value
                })
              })
            })
            console.log(data1)
            console.log(JSON.stringify(data1))
            let data1JSON = JSON.stringify(data1)
            var blob = new Blob([data1JSON],{type:"text/plain;charset=utf-8"})
            saveAs(blob,"save json")
        }
      },false)
</script>

4.全部代码

<template>
  <div>
      <el-button @click="writer">写入</el-button>
      <input type="file" id="files" @click="writer">
      <input type="button" id="export" value="保存">
  </div>
</template>

<script>
// import e from 'https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js'
import area from '@/assets/area.js'
export default {
  name:'doc',
  data(){
    return{
      area:area,
      data:[]
    }
  },
  methods:{
   writer(){
      // console.log(area)
      var writeFiles = document.getElementById('files')
      // console.log(writeFiles)
    writeFiles.addEventListener('change',function(){
          var files1 = writeFiles.files[0]
          // console.log(files1)  // => 图一
          var reader = new FileReader()
          reader.readAsText(files1)
          reader.onload = function() {
            // console.log(this.result) // => 图二
            let data = JSON.parse(this.result)
            // console.log(data) // => 图三
            data.forEach(item => {
              item.children.forEach(dis => {
                // console.log(dis)
                dis.children.unshift({
                  label:`全${dis.label}`,
                  value:dis.value
                })
              })
            })
            console.log(JSON.stringify(data)) // => 图四
            this.data = data
            // console.log(this.data)
          }
      },false)
      var button = document.getElementById('export')
      button.addEventListener('click',function() {
        var files1 = writeFiles.files[0]
        var reader = new FileReader()
        reader.readAsText(files1)
        reader.onload = function() {
            // console.log(this.result) // => 图一
            var data1 = JSON.parse(this.result)
            // console.log(data) // => 图二
            data1.forEach(item => {
              item.children.forEach(dis => {
                // console.log(dis)
                dis.children.unshift({
                  label:`全${dis.label}`,
                  value:dis.value
                })
              })
            })
            console.log(data1)
            console.log(JSON.stringify(data1))
            let data1JSON = JSON.stringify(data1)
            var blob = new Blob([data1JSON],{type:"text/plain;charset=utf-8"})
            saveAs(blob,"save json")
        }
      },false)
    }
  }
}
</script>

<style>

</style>