解决vue单页文件引入外部js的问题

方法一

1.在main.js中引入

Vue.component('remote-script', {
    render: function (createElement) {
        var self = this;
        return createElement('script', {
            attrs: {
                type: 'text/javascript',
                src: this.src
            },
            on: {
                load: function (event) {
                    self.$emit('load', event);
                },
                error: function (event) {
                    self.$emit('error', event);
                },
                readystatechange: function (event) {
                    if (this.readyState == 'complete') {
                        self.$emit('load', event);
                    }
                }
            }
        });
    },
    props: {
        src: {
            type: String,
            required: true
        }
    }
});

2.在所需要的引入外部js的页面使用

src地址里面填要引入js文件的地址即可：

---

第二则方法 ：

在普通的项目中，我们可以通过来引入外部的js文件，但是在Vue项目中，就不可以使用这种方式了，需要使用ES6语法来引入，同时还要对已有的js文件做相应的修改。
一般情况下，我们引入外部js文件，是要调用js文件中的函数。在Vue项目中，我们首先要使用export命令将这个函数抛出，然后才能在其他的Vue组件中使用import命令引入。同时还要注意外部js脚本的存放位置，不能放在components文件夹下。

一、修改外部js脚本

比如有一个实现MD5加密算法的js脚本文件，代码如下：

var MD5 = function (string) {

    // 这里是MD5的具体实现算法

}

如果我们在其他的Vue组件中想要引入MD5函数，那么要在MD5加密算法的js脚本的最后，使用如下代码，将MD5函数导出：

export {
  MD5
}

最后还是要提示一下，这个外部脚本不要放在components文件夹下，否则会一直报错。可以在src文件夹下新建一个js文件夹，然后将外部js脚本放在这个文件夹下，然后就可以在其他Vue组件中引入该js脚本。

二、在Vue组件中引入js组件

在组件中使用import { 函数名 } from 外部脚本名来从外部js脚本中导入我们需要使用的函数。比如我们要从md5.js脚本中导入MD5函数，使用以下代码：

import { MD5 } from '../js/md5'

这样，我们就可以在这个Vue组件中正常调用MD5函数了，代码如下：

 created: function () {
    console.log(MD5("66666"));
}

如果引入的外部js文件不是一个函数，要把这个js用函数包起来先export出去，然后在使用import或require导入

---

第三种方法

如果要引入第三方JS或者css 最好是把文件放在statis文件夹下，此处是静态文件存放的位置

第一种方法：

直接在index.html中引入

js

css

第二种 在单页面中用import方法导入

js

 import mui from '../../../static/mui.min.js'

css

 @import "../../common/stylus/mixin";

import引入 要写好路径即可

第三种 在mian.js中引入css，代码如下

import 'static/css/main.css'

这样就可以直接使用了