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