ES6 静态文件 模块化 file协议跨域问题解决

之前都是再项目中使用ES6的模块化的语法，最近想写一些基础的例子，出现一些坑。记录下来，希望后来人可以走的更远。
本文不讲import和export的应用了，自行百度。

html

1.引用带有import和export语法的js类型必须改成module。
在script标签中写js代码，或者使用src引入js文件时，默认不能使用module形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来改变方式。
否则路浏览器会报下图错误

更改完成后运行代码，浏览器报了下图错误

这个其实就是由于浏览器的同源政策产生的跨域错误。

这里是引用
同源策略（Same origin policy），是出于安全而诞生的一种约定，规定了只能在本域内进行资源访问。所谓同源是指"协议+域名+端口"三者相同。

但是普通的http,https协议是支持跨域的，但是我们访问的是本地文件，用的是file协议，file协议是不支持跨域的。
解决方法也简单，运行环境改为http协议下，就可以正常访问了。
我用的是vscode的插件Live Server。
live-server是可以运行前端静态文件的一个服务器。
通过运行服务用网络请求http协议访问文件。解决这个问题。当然其他服务也可以做到这一点。