在Vue项目中引入外部javaScript文件，可以采用直接操作DOM的方法，也可以通过Vue的createElement方法封装组件来实现。直接操作DOM的方法简单直接，但在项目中维护起来较为不便，且不易扩展。
第一种方法的代码示例如下：
export default {
mounted() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
document.body.appendChild(s);
},
}
使用createElement方法封装组件可以提高代码的可维护性和扩展性。示例如下：
export default {
components: {
'dingtalk': {
render(createElement) {
return createElement(
'script', {
attrs: {
type: 'text/javascript',
src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
},
},
);
},
},
},
}
这样的封装方式使得外部JavaScript文件的引入变得更加灵活和易于管理。
为了进一步提升代码的通用性和复用性，可以封装一个通用组件remote-js，用于引入任何外部JavaScript文件。示例如下：
export default {
components: {
'remote-js': {
render(createElement) {
return createElement(
'script', {
attrs: {
type: 'text/javascript',
src: this.src,
},
},
);
},
props: {
src: {
type: String,
required: true,
},
},
},
},
}
通过使用这个组件，只需传入src属性即可引入外部JavaScript文件，使用方法如下：
remote-js>
❷ vue项目中如何引入外部js文件有什么需要注意的地方
在Vue项目中引入外部js文件，有多种方式，每种方法都有其适用场景。首先，直接在Vue项目的index.html中使用全局引入方法，例如：
这种方式简单直接，但可能导致不必要的组件加载，特别是当目标js插件仅在部分组件中使用时。
其次，如果下载的文件为本地静态文件，可以使用import方法导入。
然而，这种策略只适用于已下载的静态文件，灵活性受限。
第三，通过Vue组件加载后，手动操作DOM插入js插件，实现特定组件内的js引入。
这种方式直接操作DOM，确保仅在当前组件中加载所需插件，避免全局影响。
第四，采用Vue的render方法，提供了一种更灵活的方式管理组件结构和引入js。
第五，高阶策略是将手动DOM操作包装为js插件，利用Promise确保js加载成功或失败时的处理逻辑。
最后，更高级的实践是动态替换要加载的js文件，通过创建一个importJs.js插件，实现根据需求动态加载不同js文件。
总结而言，Vue项目中引入外部js文件时，需根据具体需求选择合适的方法，确保资源高效利用且不造成全局影响。使用上述方法，开发者可根据项目的复杂度和特定需求，灵活地引入、管理及替换js文件，优化项目性能与开发效率。