Vue.js（v2）中如何为HTML标签添加data属性

嘿，这个需求其实挺常见的——毕竟Vue默认把实例挂载到<body>里的#app元素上，直接操作根级别的<html>标签确实没那么直观。我给你几个实用的方案，你可以根据自己的场景来选：

1. 静态值：直接修改public/index.html（最简单） #

如果你的data-foo值是固定不变的（比如就是"bar"），根本不用写任何Vue代码，直接在项目的public/index.html里手动修改<html>标签就行：

<html data-foo="bar">
  <body>
    <div id="app"></div>
  </body>
</html>

这种方法最直接，打包后会直接保留这个属性，完全不需要额外逻辑。

2. 动态值：利用Vue生命周期钩子操作DOM #

如果data-foo的值需要根据Vue实例里的数据动态变化，你可以在Vue实例的mounted钩子中直接操作DOM（因为这个钩子执行时，Vue已经完成了挂载，操作DOM是安全的）：

new Vue({
  el: '#app',
  data() {
    return {
      fooValue: 'bar' // 这里可以是动态生成的值
    };
  },
  mounted() {
    // 方式一：使用DOM元素的dataset属性（推荐，更符合HTML5规范）
    document.documentElement.dataset.foo = this.fooValue;
    
    // 方式二：直接调用setAttribute（兼容性更广，适合旧浏览器）
    // document.documentElement.setAttribute('data-foo', this.fooValue);
  },
  // 如果值需要实时更新，可以用watch监听
  watch: {
    fooValue(newVal) {
      document.documentElement.dataset.foo = newVal;
    }
  }
});

要是你的值会随时间变化，记得加上watch监听，这样每次fooValue改变时，<html>的data属性也会同步更新。

3. 环境变量驱动：用Vue CLI的模板语法（适合多环境场景） #

如果你用的是Vue CLI创建的项目，public/index.html支持EJS模板语法。如果data-foo的值需要根据不同环境（开发/生产）变化，可以结合环境变量来设置：

<html data-foo="<%= process.env.VUE_APP_FOO %>">

然后在项目根目录的.env文件里定义变量：

VUE_APP_FOO=bar

打包的时候，Vue CLI会自动把模板里的<%= process.env.VUE_APP_FOO %>替换成对应的环境变量值，非常适合需要根据环境配置的场景。

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