Vue解决获取本地json文件，并读取数据输出

因为浏览器出于安全的限制，不能直接获取本地的文件，只能使用input选择的方法查看文件

那么在vue中就有办法进行解决(此办法本人使用正常访问)

• 在需要引入的页面中或者在main.js中，使用import方式引入项目中的文件 例如：获取项目中 public 文件夹下的 sava.json 文件

<script>
//使用import引入json
import datajson from '../public/sava.json'
export default { 
   data(){
   },
   created() {
      //输出引入的json文件到控制台
      console.log('本地文件',datajson)
   }
}
</script>

• 到这里引入本地json文件的方法就完成了，并且可以得到文件中的数据## 但是如果我想动态获取本地json文件该怎么办呢

这就需要使用到vue的 import() 函数了

<script>
//使用import引入json
import datajson from '../public/sava.json'
export default {
   data(){
   },
   created() {
     // 重复引入import,每10秒引入一次并输出内容
        setInterval(function(){
            import('../public/sava.json').then(res=>{
                console.log('引入成功',res)
            })
        },10000)
   }
}
</script>

大功告成