vue3?js配置@符作為根路徑的詳細代碼示例
更新時間：2025年05月20日 10:21:08 作者：涼笙Drunk
這篇文章主要介紹了vue3?js配置@符作為根路徑的相關(guān)資料,通過示例代碼介紹了如何通過配置jsconfig.json/tsconfig.json及構(gòu)建工具（Vite/Webpack）設置別名,使@符號指向src目錄,簡化模塊導入路徑,提升代碼可讀性和維護性,需要的朋友可以參考下
1. 配置 jsconfig.json
如果你使用的是 JavaScript，可以在項目根目錄下創(chuàng)建一個
jsconfig.json文件，并添加以下配置：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}2. 配置 tsconfig.json
如果你使用的是 TypeScript，可以在
tsconfig.json文件中添加以下配置：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}3. 配置 Vite
如果你使用的是 Vite 作為構(gòu)建工具，你還需要在
vite.config.js或vite.config.ts中配置別名
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
});4. 配置 Webpack
如果你使用的是 Vue CLI 或 Webpack，你可以在
vue.config.js中配置別名：
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}
};5. 使用 @ 符號導入模塊
配置完成后，你可以在項目中這樣導入模塊：
import MyComponent from '@/components/MyComponent.vue';
這樣，
@符號就會指向src目錄，使得導入路徑更加簡潔和易讀。
總結(jié)
通過配置
jsconfig.json或tsconfig.json文件，并在構(gòu)建工具（如 Vite 或 Webpack）中設置別名，你可以輕松地將@符號配置為項目的根路徑。這樣可以簡化模塊導入路徑，提高代碼的可讀性和維護性。
到此這篇關(guān)于vue3 js配置@符作為根路徑的文章就介紹到這了,更多相關(guān)vue3 js配置@符作根路徑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了vite插件打包更順暢的使用技巧示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue mounted組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
這篇文章主要介紹了Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
本篇文章主要介紹了Vue2.0 實現(xiàn)單選互斥的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了Vue-Router進階之滾動行為詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue實現(xiàn)下拉多選、可搜索、全選功能(示例代碼)
本文介紹了如何在Vue中實現(xiàn)一個樹形結(jié)構(gòu)的下拉多選組件,支持任意一級選項的選擇,全選功能,以及搜索功能,通過在mounted生命周期中獲取數(shù)據(jù),并使用handleTree函數(shù)將接口返回的數(shù)據(jù)整理成樹形結(jié)構(gòu),實現(xiàn)了這一功能,感興趣的朋友一起看看吧2025-01-01
一文帶你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一項強大功能,它改進了代碼組織和重用,使得構(gòu)建組件更加靈活和可維護,本文我們將深入探討 Composition API 的各個方面,希望對大家有所幫助2023-10-10
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08