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

Question

我需要从 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默认提供的。

Answer 1

你可以把它放在window

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

Answer 2

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

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

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

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

Exposing variables from main.js to other scripts in a vue-cli project