2023年6月21日发(作者：)

Vue组件中如何引⼊外部的js⽂件背景在Vue中，通常我们引⼊⼀个js插件都是使⽤npm ⽅式下载然后import使⽤的。但是我现在本地有了js⽂件或者是⼀个远程js⽂件链接，我不想使⽤npm install xxx 的⽅式，有什么办法吗？⽅式⼀简单粗暴，直接在Vue项⽬的 中使⽤全局的⽅式引⼊，⽐如： 帮BOSS | 测评 {{ie9 /resources/js/}}

// 暴⼒引⼊缺点：不使⽤该js插件的组件也会加载，⽽我只想在某个Vue组件中使⽤该js插件。⽅式⼆如果是下载到本地的静态⽂件，可以使⽤import 的⽅式导⼊。import { xxx } from '../js/' //注意路径缺点：下载的静态⽂件才可以⽅式三在Vue组件加载完后，⼿动操作DOM插⼊js插件。export default { mounted() { let script = Element('script'); = 'text/javascript'; = '你的js⽂件地址'; Child(script); },}该⽅式直接操作DOM，只在当前组件插⼊js插件。⽅式四使⽤render⽅法export default { components: { 'xxx-js': { render(createElement) { return createElement( 'script', { attrs: { type: 'text/javascript', src: '你的js⽂件地址', }, }, ); }, }, },}// 使⽤ 在页⾯中调⽤⽅式五⾼阶玩法。将⽅式三包装成⼀个js插件，使⽤ Promise，js加载成功，调⽤resolve，js加载失败，调⽤reject。function loadJs(src) { return new Promise((resolve,reject)=>{ let script = Element('script'); = "text/javascript"; = src; Child(script);

= ()=>{ resolve(); } r = ()=>{ reject(); } })}

export default loadJs使⽤的时候：import loadJs from '../../utils/base/loadJs'

export default { mounted(){ loadJs('/').then(()=>{ // 加载成功，进⾏后续操作 }) }}⽅式六更⾼阶⽅式。可以动态替换要加载的js⽂件。包装⼀个 插件。// 导⼊外部jsimport Vue from 'vue'

ent('remote-script', { render: function (createElement) { var self = this; return createElement('script', { attrs: { type: 'text/javascript', src: }, on: { load: function (event) { self.$emit('load', event); }, error: function (event) { self.$emit('error', event); }, readystatechange: function (event) { if (tate == 'complete') { self.$emit('load', event); } } } }); }, props: { src: { type: String, required: true } }});使⽤⽅式：// 引⼊import 'common/'// html使⽤的地⽅（完）

2023年6月21日发(作者：)

Vue组件中如何引⼊外部的js⽂件背景在Vue中，通常我们引⼊⼀个js插件都是使⽤npm ⽅式下载然后import使⽤的。但是我现在本地有了js⽂件或者是⼀个远程js⽂件链接，我不想使⽤npm install xxx 的⽅式，有什么办法吗？⽅式⼀简单粗暴，直接在Vue项⽬的 中使⽤全局的⽅式引⼊，⽐如： 帮BOSS | 测评 {{ie9 /resources/js/}}

// 暴⼒引⼊缺点：不使⽤该js插件的组件也会加载，⽽我只想在某个Vue组件中使⽤该js插件。⽅式⼆如果是下载到本地的静态⽂件，可以使⽤import 的⽅式导⼊。import { xxx } from '../js/' //注意路径缺点：下载的静态⽂件才可以⽅式三在Vue组件加载完后，⼿动操作DOM插⼊js插件。export default { mounted() { let script = Element('script'); = 'text/javascript'; = '你的js⽂件地址'; Child(script); },}该⽅式直接操作DOM，只在当前组件插⼊js插件。⽅式四使⽤render⽅法export default { components: { 'xxx-js': { render(createElement) { return createElement( 'script', { attrs: { type: 'text/javascript', src: '你的js⽂件地址', }, }, ); }, }, },}// 使⽤ 在页⾯中调⽤⽅式五⾼阶玩法。将⽅式三包装成⼀个js插件，使⽤ Promise，js加载成功，调⽤resolve，js加载失败，调⽤reject。function loadJs(src) { return new Promise((resolve,reject)=>{ let script = Element('script'); = "text/javascript"; = src; Child(script);

= ()=>{ resolve(); } r = ()=>{ reject(); } })}

export default loadJs使⽤的时候：import loadJs from '../../utils/base/loadJs'

export default { mounted(){ loadJs('/').then(()=>{ // 加载成功，进⾏后续操作 }) }}⽅式六更⾼阶⽅式。可以动态替换要加载的js⽂件。包装⼀个 插件。// 导⼊外部jsimport Vue from 'vue'

ent('remote-script', { render: function (createElement) { var self = this; return createElement('script', { attrs: { type: 'text/javascript', src: }, on: { load: function (event) { self.$emit('load', event); }, error: function (event) { self.$emit('error', event); }, readystatechange: function (event) { if (tate == 'complete') { self.$emit('load', event); } } } }); }, props: { src: { type: String, required: true } }});使⽤⽅式：// 引⼊import 'common/'// html使⽤的地⽅（完）