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实例并将其导入其他脚本中。

<div class="card">
    <div class="card-body" :class="referencia.status">
        <h5 class="card-title">Referências Pessoais</h5>
        <div v-for="referencia in referencias">
            <p class="card-text">
              NOME: @{{ referencia.nome }}
            </p>
            ...
            <hr>
        </div>
    </div>
    <div class="card-footer text-muted">
      <button class="some-styling-here" @click="referencia.status = 'ok'"> OK </button>
      <button class="some-styling-here" @click="referencia.status = 'falta'"> Falta </button>
      <button class="some-styling-here" @click="referencia.status = 'erro'"> Erro </button>
    </div>
</div>

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

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

在vue-cli项目中将变量从main.js公开给其他脚本

2 个答案: