vue引入外部js文件并使用

// main.js (Vue项目的入口文件)

// 引入外部的JS文件
import './assets/external.js';

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

// external.js (外部JS文件)

// 定义一个全局函数，可以在Vue组件中使用
function globalFunction() {
  console.log('This is a global function from external.js');
}

// 将函数挂载到window对象上，使其在全局范围内可用
window.globalFunction = globalFunction;

<!-- App.vue (Vue组件文件) -->

<template>
  <div id="app">
    <button @click="callExternalFunction">Call External Function</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    callExternalFunction() {
      // 调用外部JS文件中的全局函数
      globalFunction();
    }
  }
}
</script>

解释说明

1. 引入外部JS文件：

   • 在main.js中，我们通过import语句引入了外部的JS文件external.js。这样做的好处是可以确保该文件的内容在应用启动时加载。

2. 定义全局函数：

   • 在external.js中，我们定义了一个名为globalFunction的函数，并将其挂载到window对象上，使得它可以在整个应用中作为全局函数使用。

3. 在Vue组件中调用全局函数：

   • 在App.vue中，我们定义了一个按钮点击事件处理函数callExternalFunction，该函数会调用external.js中定义的globalFunction。

通过这种方式，你可以轻松地将外部JS文件引入到Vue项目中并使用其中定义的功能。