如何从外部JavaScript文件调用Vue.js函数？已实现代码失效求助

原代码的问题根源 #

• 缺少模块导出：Vue实例文件中定义的vm没有对外暴露，外部JS通过import获取到的默认值为undefined，调用displayData时会直接抛出“无法读取undefined属性”的报错
• 错误的调用路径：外部函数内使用this.vm引用实例，但当前作用域并未挂载vm属性，普通函数的this默认指向调用上下文（通常为window对象），根本找不到目标实例
• 潜在时序问题：若外部JS在Vue实例完成初始化前就触发方法调用，会出现实例未就绪的调用失败

代码修改步骤 #

1. 修改Vue实例文件，增加导出逻辑 #

// vue.js  修改后的Vue实例文件
import Vue from 'vue'
var vm = new Vue({
    el: '#app',
    data: {
        firstname: '',
        lastname: ''
    },
    methods: {
        displayData: function() {
            alert(`${this.firstname} ${this.lastname}`)
        }
    }
})
// 必须添加该行，将实例暴露给外部模块导入
export default vm

2. 修改外部JS的调用逻辑 #

// 外部js文件  修改后
// 导入值即为完整的Vue实例
import vm from './vue.js';

function callingVuejsFunction(data) {
    // 直接调用导入的实例方法，无需通过this挂载
    vm.displayData()
    // 存在时序不确定的场景，可加判断避免报错
    // if (vm) vm.displayData()
}

注意事项 #

需确保导入路径和实际文件路径完全匹配，避免模块解析失败。

内容的提问来源于stack exchange，提问作者kp97338