如何让Babel-standalone与Vue.js配合实现IE9兼容（无Node构建步骤）

嘿，这个需求我刚好折腾过！要在纯HTML环境里让Babel-standalone和Vue.js协同兼容IE9，核心是理顺加载顺序、让Babel正确编译Vue的ES6+脚本，还要补全IE9缺失的API支持。下面给你一步步拆解：

首先必须用Vue 2.x版本（比如2.6.14），Vue 3完全放弃了IE9支持。加载顺序一定要按这个来，不然会出各种奇怪的错误：

• 先加载IE9必需的Polyfill（es5-shim、es5-sham、es6-promise）
• 再加载Babel-standalone
• 最后加载Vue.js

Babel-standalone会自动处理type="text/babel"的脚本标签，我们要把Vue的实例代码放在这类标签里，同时给Babel配置目标环境为IE9：

• 在脚本标签里添加data-presets="@babel/preset-env"
• 通过内联配置指定目标：babel.config({ presets: [['@babel/preset-env', { targets: { ie: '9' } }]] })

这里要注意：Vue的模板部分（比如el挂载的DOM内容、或者<template>标签里的代码）是Vue自己编译的，不需要Babel处理，但脚本里的ES6+语法（箭头函数、let/const、解构等）必须让Babel转译。

IE9缺太多ES5+的核心API，光靠Babel转译语法不够，必须补全这些API：

• es5-shim和es5-sham：补全Object.defineProperty、Array.forEach等ES5核心方法
• es6-promise：给IE9添加Promise支持（Vue的一些异步逻辑依赖这个）

下面是一个直接就能用的HTML示例，复制就能在IE9里跑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue + Babel-standalone 兼容IE9</title>
  <!-- 先加载Polyfill -->
  <script src="https://cdn.jsdelivr.net/npm/es5-shim@4.5.14/es5-shim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/es5-shim@4.5.14/es5-sham.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.8/dist/es6-promise.min.js"></script>
  <!-- 加载Babel-standalone -->
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.22.5/babel.min.js"></script>
  <!-- 加载Vue 2.x -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="addCount">点击计数：{{ count }}</button>
  </div>

  <!-- 用Babel编译的Vue脚本 -->
  <script type="text/babel" data-presets="@babel/preset-env">
    // 配置Babel目标为IE9
    babel.config({
      presets: [['@babel/preset-env', { targets: { ie: '9' } }]]
    });

    new Vue({
      el: '#app',
      data() {
        // 这里用了ES6的箭头函数和let，Babel会转译成IE9能识别的语法
        return {
          message: 'IE9也能跑Vue + ES6啦！',
          count: 0
        }
      },
      methods: {
        addCount() {
          // 解构赋值也会被转译
          let { count } = this;
          this.count = count + 1;
        }
      }
    })
  </script>
</body>
</html>

• 不要用Vue 3，IE9完全不支持
• 不要在模板里用ES6箭头函数（比如@click="() => addCount()"），IE9识别不了，直接写方法名就行
• 如果需要用更复杂的ES6+特性（比如async/await），还要额外加载regenerator-runtime的polyfill，放在Babel之前加载
• 尽量避免用模板字符串（`xxx`），IE9不支持，换成普通字符串拼接或者用HTML里的模板标签

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