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

【问题标题】：Exposing variables from main.js to other scripts in a vue-cli project将 main.js 中的变量暴露给 vue-cli 项目中的其他脚本
【发布时间】：2019-09-16 16:00:13
【问题描述】：

我需要从 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.js webpack vue-cli

【解决方案1】：

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

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

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

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

【讨论】：

我已经尝试过了，但它发出一条错误消息，指出目标脚本 ('./app.js') 不包含我指定的名称的导出。需要提一下，其他脚本（不是 webpack 打包到同一个脚本中的其他模块）需要看到它，所以必须在 webpack 将其打包到 app.js 之后进行导入。
我在 vue.config.js 的 webpack 配置的output 部分添加了library: 'myLibraryName'，它现在可以工作了。我现在可以在导入脚本后使用 myLibraryName 作为全局变量。感谢您的信息，它真的很有帮助！对于那些想知道如何将 webpack 输出文件转换为库的人，请参阅：webpack.js.org/guides/author-libraries
我很高兴能够提供帮助，并且您自己解决了以下问题。已投票，以便其他人可以看到。

【解决方案2】：

你可以把它放在window

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

【讨论】：