[email protected]中cdn引入外部js

本文章代码所用vue-cli的版本号为：
@vue/cli 4.1.2

有的时候，我们需要在index.html中通过cdn的方式引入一些外部的js脚本等资源，比如百度地图、高德地图和Leaflet等，碰到这种情况我们该如何操作呢？

1，index.html中引入相关文件
vue-cli自动创建的项目中，index.html在根目录的public文件夹下，直接在该index.html中引入相关资源，以LeafLet为例：

引入好后，我们加入初始化地图等相关代码，然后直接编译，会发现eslint有个报错的提示：

出现这个错误的原因是：代码中直接使用了LeafLet中的Lapi，但是该依赖我们是通过cdn的方式引入的，eslint并不知道有这个对象，认为我们没有定义，所以报错了。下一步，我们要让eslint知道有这个全局变量。

2，配置eslint
如何配置eslint呢，我们可以直接在rules中关闭对no-undef的检查，这样虽然不会提示错误了，但是并不优雅，其实我们可以通过globals告诉eslint有这个全局变量就可以了。直接修改项目根目录下的eslintrc.js，增加如下代码：

'globals': {
    'L': 'readonly' // 旧版里是将'readonly'换成true，建议用'readonly'这种新版的语法
}

eslint官方对global的解释是：当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
eslint官方文档连接：https://eslint.bootcss.com/docs/user-guide/configuring/