在Vue3開發(fā)中引用js文件幾種常見場景的方法
更新時間：2025年08月19日 08:39:50 作者：繁若華塵
在Vue.js開發(fā)中,引用外部JavaScript文件是常見的需求,以便利用第三方庫或自定義功能,這篇文章主要介紹了在Vue3開發(fā)中引用js文件幾種常見場景的方法,需要的朋友可以參考下
前言
在 Vue3 中引用 JavaScript 文件的方式與 Vue2 類似，但需要注意一些 Composition API 的特性和模塊化規(guī)范的變化。以下是幾種常見場景的引用方法：
1. 全局引入 JS 文件
適用于需要在多個組件中使用的工具函數(shù)、配置或第三方庫。
方式一：在main.js中直接引入
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './your-global.js' // 直接引入全局JS文件
createApp(App).mount('#app')
方式二：掛載到全局屬性（推薦）
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as yourModule from './your-module.js'
const app = createApp(App)
app.config.globalProperties.$yourModule = yourModule // 掛載到全局
app.mount('#app')
在組件中使用：
// 組件內(nèi)
import { getCurrentInstance } from 'vue'
export default {
setup() {
const { proxy } = getCurrentInstance()
proxy.$yourModule.someFunction() // 通過全局屬性調(diào)用
}
}
2. 局部引入 JS 文件
在需要使用的組件中直接引入：
<script setup>
// 直接導(dǎo)入ES模塊
import { someFunction } from '@/utils/your-module.js'
// 使用函數(shù)
someFunction()
</script>
3. 引入第三方庫（如非模塊化JS）
方式一：通過public目錄 + HTML 引入
- 將 JS 文件放到
public/js目錄。 - 在
index.html中添加：
<head> <script src="/js/your-legacy-library.js"></script> </head>
- 在組件中直接使用全局變量：
// 聲明全局變量避免 ESLint 報錯（可選）
/* global YourLibrary */
export default {
setup() {
YourLibrary.doSomething()
}
}
方式二：通過 npm 安裝模塊化庫
npm install your-library
在組件中使用：
import { someFunction } from 'your-library'
4. 動態(tài)導(dǎo)入（按需加載）
使用 import() 實現(xiàn)動態(tài)加載：
const module = await import('@/path/to/module.js')
module.someFunction()
5. 處理 CommonJS 模塊
如果遇到 CommonJS 模塊（如某些舊庫），可以通過默認(rèn)導(dǎo)入：
import cjsModule from 'cjs-module'
// 或者解構(gòu)
const { someFunction } = require('cjs-module')
注意事項
- 模塊化規(guī)范：優(yōu)先使用 ES 模塊（
import/export）。 - 響應(yīng)式數(shù)據(jù)：如需在 JS 文件中使用 Vue 的響應(yīng)式系統(tǒng)，需顯式導(dǎo)入 API：
// utils.js import { ref } from 'vue' export const count = ref(0) - TypeScript 支持：為第三方庫添加類型聲明（
.d.ts文件）以獲得類型提示。 - 構(gòu)建配置：若遇到特殊文件格式（如
.cjs），需在vite.config.js或vue.config.js中配置。
示例：引入 Axios
// utils/request.js
import axios from 'axios'
const instance = axios.create({ baseURL: 'https://api.example.com' })
export default instance
在組件中使用：
<script setup>
import request from '@/utils/request.js'
const fetchData = async () => {
const res = await request.get('/data')
}
</script>
通過以上方法，你可以靈活地在 Vue3 項目中引用各種類型的 JavaScript 文件。
總結(jié)
到此這篇關(guān)于在Vue3開發(fā)中引用js文件幾種常見場景方法的文章就介紹到這了,更多相關(guān)Vue3引用js文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue判斷數(shù)組內(nèi)是否存在某一項的兩種方法
這篇文章主要介紹了Vue判斷數(shù)組內(nèi)是否存在某一項,今天給大家分享兩種方法，分別是findIndex()和 indexOf()方法，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
利用vue組件自定義v-model實現(xiàn)一個Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實現(xiàn)一個Tab組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue使用el-table篩選tree樹形結(jié)構(gòu)的數(shù)據(jù)問題
這篇文章主要介紹了vue使用el-table篩選tree樹形結(jié)構(gòu)的數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
elementUi vue el-radio 監(jiān)聽選中變化的實例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽選中變化，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
今天小編就為大家分享一篇Vue 中對圖片地址進(jìn)行拼接的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例，本來移動端開發(fā)H5應(yīng)用，準(zhǔn)備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來使用2017-04-04
本文主要介紹Vue.js中監(jiān)聽器和計算屬性的相關(guān)知識點，包括對普通屬性的監(jiān)聽、對對象的監(jiān)聽、對數(shù)組的監(jiān)聽，以及計算屬性的Set方法，計算屬性與監(jiān)聽器的區(qū)別等等2021-05-05
vue 實現(xiàn)LED數(shù)字時鐘效果（開箱即用）
這篇文章主要介紹了vue 實現(xiàn)LED數(shù)字時鐘效果（開箱即用）,每一個數(shù)字由七個元素構(gòu)成，即每一個segment元素，本文給大家分享實現(xiàn)實例，感興趣的朋友一起看看吧2019-12-12