一般项目创建完毕之后,Vue都有一个main.js文件,但是有的时候业务需求,需要在这个js文件里面引入其他js文件,两个步骤就可以实现调用了。

  1. 目标Js文件内创建对象exportObject同时调用具体函数,然后在export default中导出对象
  2. 修改main.js文件,导入刚刚指向的exportObject。然后通过vue.config对象添加exportObject
Test.js目标Js文件
// DES: 定义一个对象执行函数
let InnerObject = innerFunction();
console.log(this);
console.log(InnerObject);

// DES: 导出当前对象
export default {
    InnerObject
}

function innerFunction() {
    console.log("输出外层this:" + this);

    function testInnerFunction() {
        console.log("输出嵌套this:" + this);
    }

    testInnerFunction();
    // DES: 返回值按需返回
    return "abc";
}
main.js Vue程序入口
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// DES: 导入刚刚export的对象
import InnerObject from "./login/js/Test.js"

Vue.config.productionTip = false;

// DES: 指向config对象的成员变量
Vue.config.InnerObject = InnerObject;

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

输出结果符合设想目标
输出结果

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐