注意

• 使用 import 导入文件时，注意路径，路径不对会报错；
• 导入之后使用外部 js 函数时，直接写导入时的名字加小括号即可，如 test(); 不需要加 this，也不需要加别的。

vue2 项目目录如下:

utils 文件夹是自己手工建的，然后在 utils 里新建 js 文件

具体代码

demo.js

export default function (a, b, c) {
  //在这里直接写函数内容
  var sum = a + b + c;
  console.log("我是vue中引入的外部js文件");
  console.log("sum:", sum);
  return sum;
}

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png" />
  </div>
</template>

<script>
import test from "./utils/demo.js";
export default {
  name: "app",
  mounted() {
    var sum = test(1, 2, 3);
    console.log("我是调用外部js的return:", sum);
  },
};
</script>

<style></style>

在组件中也可直接引入外部 js 文件使用：

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <HELLO_WORLD></HELLO_WORLD>
  </div>
</template>

<script>
import HELLO_WORLD from "./components/HelloWorld.vue";
export default {
  name: "app",
  components: {
    HELLO_WORLD,
  },
};
</script>

<style></style>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>HelloWorld</h1>
    <button @click="click">点我调用外部js文件</button>
  </div>
</template>

<script>
import test from "../utils/demo.js";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    click() {
      console.log("click click click click click");
      var sum = test(1, 2, 3);
      console.log("我是调用外部js的return:", sum);
    },
  },
};
</script>

<style scoped></style>

点击 button 后：

总结

在 vue2 项目中调用外部 js 文件，需要在 js 文件中 export，在需要的 vue 文件中 import，然后直接使用即可。