Vue.js开发版与压缩版的区别及代码报错是否正常的咨询

嘿，我来帮你把这两个问题讲清楚：

这两个版本的差异主要围绕开发体验和生产性能展开：

• 调试与提示：开发版包含完整的警告、错误提示和调试工具支持，当你写出不符合Vue规范的代码（比如模板里用了未定义的变量），控制台会给出非常具体的报错信息，帮你快速定位问题；压缩版（生产版）会移除所有调试相关的代码，几乎没有任何提示，即使代码有潜在问题也不会主动报错。
• 文件体积：开发版保留了源码注释、未压缩的结构和调试逻辑，文件体积远大于压缩版；压缩版经过了混淆、压缩和冗余代码剔除，体积极小，能大幅减少页面加载时间，适合部署到线上环境。
• 运行性能：开发版为了实时校验代码正确性，会有一些额外的性能开销；压缩版跳过了所有开发时的校验逻辑，运行效率更高，是生产环境的最优选择。
• 代码严格性：开发版会对Vue的使用方式进行严格校验，比如检测响应式数据的正确声明、模板变量的合法性等；压缩版则追求极致性能，不会做这些校验，只要代码能执行就会直接运行。

这个现象完全正常，原因在于开发版和压缩版的校验逻辑不同：

• 开发版的Vue会严格检查模板中用到的变量是否属于当前Vue实例的data、props、methods，或者是全局注册的属性。你的代码里bus是一个独立的Vue实例，既没有挂载到当前的vm实例上，也没有注册为全局属性，所以开发版会判定这个变量未定义，抛出警告。
• 压缩版为了性能会跳过这个校验步骤，直接尝试从全局作用域中读取bus——因为你用var声明了bus，它会自动挂载到window对象上，所以压缩版能正常读取到这个变量，代码可以运行。

推荐的修正写法（兼顾开发和生产环境） #

为了让代码在两个版本下都能正常运行且不出现警告，你可以选择以下几种方式：

方式1：把bus挂载到Vue原型上

// 全局注册bus
Vue.prototype.$bus = new Vue({
  data: {
    someVar: 'Variable from BUS'
  }
})

var vm = new Vue({
  el: "#app",
  data: {
    myVar: 'Variable from MAIN VM'
  }
});

模板修改为：

<div id="app"> {{ $bus.someVar }} -- {{ myVar }} </div>

方式2：在当前实例的data中引入bus

var bus = new Vue({
  data: {
    someVar: 'Variable from BUS'
  }
})

var vm = new Vue({
  el: "#app",
  data: {
    myVar: 'Variable from MAIN VM',
    bus: bus // 将bus作为当前实例的属性
  }
});

模板可以保持原来的写法，这样开发版就能识别到bus是当前实例的属性，不会再抛出警告。

方式3：使用更规范的状态管理方案

如果你的项目需要频繁的组件间通信，建议使用Vuex来统一管理状态，或者单独创建一个事件总线模块并在组件中导入，避免全局变量带来的维护问题。

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