在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文件，優化項目性能與開發效率。