vue2項目中引用外部js文件

vue2項目目錄如下(utils文件夾是自己手工建的，然后在utils里新建js文件):

• 使用import導入文件時，注意路徑，路徑不對會報錯；
• 導入之后使用外部js函數時，直接寫導入時的名字加小括號即可，如 test(); 不需要加this，也不需要加別的。

 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，然后直接使用即可。