其实vue加载远程js的教程很多，但是我比较笨呐。。。用不出来，每次都报方法/属性不存在的错误，来看一下典型的写法：
const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '<js地址>'; document.body.appendChild(s);如: Vue如何引入远程JS文件 如果这个能满足你们的需求就不需要看下面了。 其实现在我想做到的是js加载完成后执行我想要执行的代码。 现在用jquery来实现： 首先在assets/js/目录下创建common.js, 然后添加函数:
function loadJs(url,_callback_success,_callback_fail){ var callback_success = function (response) { console.log("load js success...",response); } var callback_fail = function (response) { console.log("load js fail...",response); } _callback_success = _callback_success || callback_success; _callback_fail = _callback_fail || callback_fail; $.getScript(url).done(_callback_success).fail(_callback_fail); }为了方便调用，可以定义一个结构体：
var API = (function () { function API() { } //加载js的函数 API.prototype.loadJs = function(url,callback){ callback = callback || {}; loadJs(url,callback.success,callback.fail); } return API; })(); export default API;接下来介绍使用方法： 方法1
在webpack.base.conf.js的module.exports/resolve/alias添加：
var webpack = require('webpack') module.exports = { ... resolve: { ... alias: { .... 'API': path.resolve(__dirname, 'assets/js/common') } ... }, ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', API: 'API', ... }) ] }在App.vue的create函数直接添加：
... created() { let api = new API.default(); window.$api = api; }, ...这种方法简单粗暴，这样定义的好处是无论在哪里，可以直接使用了:
$api.loadJs("<js地址>",{ success(){ //加载你想要做的事 } });方法二 自己写个vue.js插件(1):自定义指令的妙用 在common文件中定义:
export default{ install(Vue){ Vue.prototype.$api = new API(); } }在mian.js中加载:
import api from 'assets/js/common' Vue.use(api)于是，只要在使用时加上this.就行了：
... this.$api.loadJs(... ...方法三 可以直接调用,只需要引入方法即可:
<script> import {loadJs} from '@/assets/js/common.js' ... created(){ //function loadJs(url,_callback_success,_callback_fail) loadJs("<js地址>",... ... } ...好了，说了这么多，那万一不想用jquery怎么办？这个的确难办，因为本人并未实践过，不过提供一下链接供参考，实现并不难： JS动态加载脚本并执行回调操作
jquery及js实现动态加载js文件的方法 写的总体复杂了了些，但是良好的结构很重要，因为
工欲善其事必先利其器
作者：陨石坠灭 链接：https://www.jianshu.com/p/a29a1e1e8d10 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
