在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見(jiàn)方法匯總
更新時(shí)間：2024年06月22日 14:52:01 作者：極夢(mèng)網(wǎng)絡(luò)無(wú)憂
在 Vue 3 項(xiàng)目開(kāi)發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項(xiàng)常見(jiàn)的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧
在 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)文章
這篇文章主要介紹了Vue-cli打包后如何本地查看的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
跨域問(wèn)題的出現(xiàn)是因?yàn)闉g覽器的同源策略問(wèn)題，如果沒(méi)有同源策略我們的瀏覽器將會(huì)十分的不安全，隨時(shí)都可能受到攻擊，今天小編通過(guò)本文給大家介紹下vue 處理跨域問(wèn)題，感興趣的朋友一起看看吧2021-09-09
這篇文章主要介紹了uni-app 的模板語(yǔ)法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面這篇文章主要給大家介紹了關(guān)于vue.js使用的相關(guān)總結(jié),需要的朋友可以參考借鑒。2017-02-02
對(duì)于Vue為何采用異步渲染，簡(jiǎn)單來(lái)說(shuō)就是為了提升性能，因?yàn)椴徊捎卯惒礁拢诿看胃聰?shù)據(jù)都會(huì)對(duì)當(dāng)前組件進(jìn)行重新渲染，為了性能考慮，Vue會(huì)在本輪數(shù)據(jù)更新后，再去異步更新視圖，本文主要通過(guò)幾個(gè)實(shí)例給大家介紹一下Vue為何采用異步渲染,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于利用jsx寫(xiě)vue組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。2017-07-07
詳解webpack + vue + node 打造單頁(yè)面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁(yè)面(入門篇) ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
vue項(xiàng)目引入antDesignUI組件實(shí)現(xiàn)
本文介紹了如何以Vue引入antDesignUI,主要包括下載安裝、配置和引入組件等步驟,通過(guò)本文,讀者可以快速了解antDesignUI在Vue中的應(yīng)用,感興趣的可以了解一下2023-08-08