未定义 vue 实例的全局变量

Posted 2023-02-22

【中文标题】未定义 vue 实例的全局变量

【英文标题】：Global variable with vue instance not defined

【发布时间】：2018-08-26 04:05:48

【问题描述】：

我在 app.js 中定义这样的 Vue.js 实例：

const vm = new Vue(
    el: '#app',
    data: 
        page: 'welcome'
    
);

并使用 Laravel 的默认 webpack 脚本：

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

Vue 正在正确加载，因为组件正在显示并且 Vue 开发者插件正在显示适当的数据。

但是，在开发者控制台和页面vm 上的脚本中没有定义。 例如在加载 Vue 组件的页面上

<script>
  console.log(vm); // Error: vm is not defined.
</script>

如何访问 Vue 实例？我想设置它的数据属性之一。

【参考方案1】：

要具有灵活性并以任何名称导入，您可以使用默认导出。

在 app.js 中：

export default new Vue(
    el: '#app',
    data: 
        page: 'welcome'
    
);

在其他 .js 文件中：

import whateverName from './app';

当然，根据文件所在的位置调整./app。

【讨论】：

我比我更喜欢你的笼统回答。

【参考方案2】：

我可以使用

export 
  vm
;

require('./main');

在main.js

import vm from './app';