将变量从main.js暴露给vue-cli项目中的其他脚本

Posted 2021-03-30

我需要从webpack生成的.js文件外部访问我的vue-cli项目的main.js中声明的Vue实例。在main.js，我有：

var vm = new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

但是，因为webpack将此代码包装在函数中并将其缩小，所以永远无法从脚本外部访问vm变量。我该如何解决这个问题并确保可以从其他脚本访问vm变量？

所有webpack设置都是vue-cli提供的默认设置。

答案

您可以导出Vue实例并将其导入其他脚本中。

export const vm = new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

要在其他脚本中访问它，只需使用

import { vm } from 'path/main.js'

另一答案

你可以把它放在window上

window.myComponent = new Vue({
  store,
  render: h => h(App)
}).$mount('#app');