vue引用js文件

作者：▍看女人酒醒的疯癫。发布日期:2025-09-03 浏览:122

// main.js
import Vue from 'vue';
import App from './App.vue';
import myJsFile from './myJsFile.js';  // 引入外部的js文件

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  created() {
    // 在Vue实例创建完成后调用引入的js文件中的方法或属性
    console.log(myJsFile.myFunction());  // 假设myJsFile.js中有一个名为myFunction的函数
  }
}).$mount('#app');

// myJsFile.js
export default {
  myFunction() {
    return 'Hello from myJsFile!';
  }
}

解释说明：

main.js：这是Vue项目的入口文件。我们在这里通过import语句引入了外部的myJsFile.js文件。
myJsFile.js：这是一个普通的JavaScript文件，其中定义了一个函数myFunction，并通过export default导出。
Vue实例：在Vue实例的created生命周期钩子中，我们调用了从myJsFile.js中导入的方法，并将结果打印到控制台。

这样就可以在Vue项目中成功引用并使用外部的JS文件了。

上一篇：vue 阻止事件冒泡

下一篇：vue字符串拼接