在Vuejs/Nuxtjs中使用CodeMirror 服务重载时出现CodeMirror未定义报错

首先明确你存在的几个配置和逻辑错误 #

• 1. nuxt.config.js 的script配置属性写错：你把type属性误写为src，导致CDN资源加载逻辑异常，同时CodeMirror的JS和CSS版本不一致，容易引发兼容问题
• 2. CDN资源加载是异步行为：热重载时组件JS执行时机可能早于CDN加载完成时机，此时全局window.CodeMirror还未挂载，就会触发未定义报错
• 3. ESLint规则校验问题：no-undef规则会检查未声明的变量，全局注入的CodeMirror没有被ESLint识别，也会触发该报错
• 4. 初始化逻辑错误：你把CodeMirror初始化放在@input事件中，每次输入内容都会重复初始化实例，不仅会报错还会导致性能问题

具体修复步骤 #

第一步：修正nuxt.config.js配置 #

调整CDN配置，修正属性错误、统一版本，示例配置如下：

// nuxt.config.js
export default {
  head: {
    script: [
      {
        type: "text/javascript", // 原配置这里误写为src，修正为type
        src: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"
      },
      {
        type: "text/javascript", // 原配置这里误写为src，修正为type
        src: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/xml/xml.min.js"
      }
    ],
    link: [
      {
        rel: "stylesheet",
        href: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css"
      }
    ]
  }
}

第二步：处理ESLint校验报错 #

两种方案二选一即可：

1. 项目根目录的.eslintrc.js中添加全局变量声明：

module.exports = {
  globals: {
    CodeMirror: true
  }
}

2. 在Test.vue的script代码顶部添加注释声明：

/* global CodeMirror */
export default {
  // 原有逻辑
}

第三步：修正CodeMirror初始化逻辑 #

将初始化逻辑移到mounted钩子中，增加加载判断避免重复初始化，同时保证资源加载完成再执行初始化：

<script>
/* global CodeMirror */
export default {
  data () {
    return {
      xmlInput: '',
      cmInstance: null // 存储codemirror实例，避免重复初始化
    }
  },
  mounted () {
    this.initCodeMirror()
  },
  methods: {
    initCodeMirror () {
      // 避免重复初始化
      if (this.cmInstance) return
      // 判断CodeMirror是否加载完成，未加载完成则延迟100ms重试
      if (typeof CodeMirror === 'undefined') {
        setTimeout(() => this.initCodeMirror(), 100)
        return
      }
      this.cmInstance = CodeMirror.fromTextArea(document.getElementById('test'), {
        mode: 'application/xml',
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        lineWrapping: true,
        tabSize: 2,
        value: this.xmlInput
      })
      this.cmInstance.setSize(500, 500)
      // 监听内容变化同步到xmlInput
      this.cmInstance.on('change', () => {
        this.xmlInput = this.cmInstance.getValue()
      })
    },
    convertToJSON () {
      // 原有XML转JSON的业务逻辑放在这里即可
      console.log('转换逻辑执行', this.xmlInput)
    }
  }
}
</script>

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