Vue单文件组件用vue2-leaflet遇ESLint报错'L is not defined'求助

嘿，我之前在VueCLI项目里用vue2-leaflet的时候也碰到过一模一样的问题——明明浏览器控制台能正常拿到L对象，ESLint却揪着“'L' is not defined”不放，给你几个实用的解决办法：

• 在ESLint配置里声明全局变量
  因为ESLint做静态检查时，不知道L是Leaflet库挂载到全局的对象，所以我们要手动告诉它这是一个合法的全局变量。找到项目根目录的.eslintrc.js（如果是json格式就是.eslintrc.json），在globals字段里添加L: true：

  module.exports = {
    // 其他已有的配置...
    globals: {
      L: true
    }
  }
  

  保存配置后重启ESLint服务，报错就会消失啦。

• 在组件里显式导入Leaflet
  vue2-leaflet的组件是基于Leaflet封装的，但L对象本身属于Leaflet核心库，我们可以直接在mapiface.vue的script里导入它：

  import L from 'leaflet'
  
  export default {
    data() {
      return {
        center: L.latLng(39.9042, 116.4074)
      }
    },
    // 其他组件逻辑
  }
  

  这种方式更符合模块化的规范，也不用依赖全局变量，ESLint自然就不会报错了。

• 用单行注释声明全局变量（仅当前文件生效）
  如果不想改全局配置也不想额外导入，可以在组件的script顶部加一行注释，告诉ESLintL是全局变量：

  /* global L */
  
  export default {
    data() {
      return {
        center: L.latLng(xxx, xxx)
      }
    }
  }
  

顺便解释下为什么会出现“运行正常但ESLint报错”的情况：Leaflet在引入时会自动把L挂载到浏览器的window对象上，所以运行时能正常访问，但ESLint是静态代码检查工具，它不会去识别运行时的全局变量，只会根据代码里的导入和配置来判断变量是否合法，所以才会出现这个矛盾的现象~

内容的提问来源于stack exchange，提问作者ajl199