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