在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見(jiàn)方法匯總
在 Vue 3 項(xiàng)目開(kāi)發(fā)中，為了方便管理和引用文件路徑，設(shè)置 @ 指向根目錄是一項(xiàng)常見(jiàn)的需求。以下為您總結(jié)了幾種常見(jiàn)的實(shí)現(xiàn)方式。
方法一：使用 Vite 配置（適用于 Vite 構(gòu)建的項(xiàng)目）
- 在項(xiàng)目根目錄創(chuàng)建
vite.config.js文件（若不存在）。 - 向該文件中添加以下配置：
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
alias: {
'@': '/',
},
},
});通過(guò)以上配置，在項(xiàng)目中使用 @ 即可表示項(xiàng)目根目錄。
方法二：使用 Webpack 配置（適用于 Webpack 構(gòu)建的項(xiàng)目）
- 確保已安裝
vue-cli并創(chuàng)建了 Vue 3 項(xiàng)目。 - 在項(xiàng)目根目錄找到或創(chuàng)建
vue.config.js文件。 - 在該文件中添加以下配置：
module.exports = {
publicPath: '/',
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('views', resolve('src/views'));
},
}
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}上述配置通過(guò) chainWebpack 為常見(jiàn)的目錄設(shè)置了別名，其中 @ 指向了 src 目錄。
無(wú)論是使用 Vite 還是 Webpack 進(jìn)行構(gòu)建，設(shè)置好路徑別名后，在項(xiàng)目代碼中就可以更便捷地引用文件了。例如，在 Vue 組件的 JavaScript 代碼中，可以使用 import xxx from '@/xxx' 來(lái)導(dǎo)入 src 目錄下的模塊；在 Vue 文件的 CSS 中，使用 ~@ 表示根路徑，如 background: url("~@/assets/logo.png") 。
希望以上內(nèi)容能幫助您在 Vue 3 項(xiàng)目中順利設(shè)置路徑別名，提高開(kāi)發(fā)效率！
到此這篇關(guān)于在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見(jiàn)方法匯總的文章就介紹到這了,更多相關(guān)Vue 3 @指向根目錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中解決組件間css層級(jí)問(wèn)題的最佳實(shí)踐
<Teleport> 是 Vue 3 中引入的一個(gè)內(nèi)置組件,用于將組件的內(nèi)容渲染到 DOM 中的指定位置,而不受組件層級(jí)結(jié)構(gòu)的限制,本文給大家介紹了Vue3使用Teleport解決組件間css層級(jí)問(wèn)題的最佳實(shí)踐,需要的朋友可以參考下2025-02-02
vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
這篇文章主要介紹了vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了js 實(shí)現(xiàn)拖拽排序，拖拽排序?qū)τ谛』锇閭儊?lái)說(shuō)應(yīng)該不陌生，平時(shí)工作的時(shí)候，可能會(huì)選擇使用類(lèi)似Sortable.js這樣的開(kāi)源庫(kù)來(lái)實(shí)現(xiàn)需求。但在完成需求后，大家有沒(méi)有沒(méi)想過(guò)拖拽排序是如何實(shí)現(xiàn)的呢？感興趣得話一起來(lái)看看下面文章得小心內(nèi)容吧2021-11-11
Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(一)
最近vue.js 非?；馃幔【幰渤脵C(jī)學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識(shí)，于是嘗試做一個(gè)像微信平臺(tái)里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號(hào)菜單編輯器功能的實(shí)現(xiàn)代碼分享給大家，需要的朋友參考下2018-05-05
這篇文章主要介紹了vue3中Vant的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
spring-cloud-stream的手動(dòng)消息確認(rèn)問(wèn)題
這篇文章主要介紹了spring-cloud-stream的手動(dòng)消息確認(rèn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
使用vue3.2實(shí)現(xiàn)多頁(yè)簽導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何使用vue3.2 + elementPlus + pinia 實(shí)現(xiàn)多頁(yè)簽導(dǎo)航,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12
這篇文章主要為大家介紹了vue?px轉(zhuǎn)rem配置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
Vue中對(duì)象數(shù)組改變其對(duì)象內(nèi)容值數(shù)組沒(méi)變化的原因與解決方案
最近開(kāi)發(fā)遇到一個(gè)問(wèn)題,修改對(duì)象某一個(gè)索引對(duì)象時(shí),直接將對(duì)象賦值給數(shù)組的某一索引對(duì)象,該數(shù)組沒(méi)變化,在 Vue 中,直接修改對(duì)象數(shù)組中某個(gè)對(duì)象的屬性值時(shí),數(shù)組的引用本身未改變,本文介紹了詳細(xì)的原理分析和解決方案,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue中 $emit的用法，通過(guò)實(shí)例代碼給大家介紹了子組件和父組件的相關(guān)知識(shí)，需要的朋友參考下吧2018-04-04