Vue2項(xiàng)目配置@指向src路徑方式
更新時(shí)間：2022年12月08日 16:16:33 作者：￡白晝の星☆
這篇文章主要介紹了Vue2項(xiàng)目配置@指向src路徑方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue2項(xiàng)目配置@指向src路徑
這樣配置的好處：
1 簡(jiǎn)寫路徑 避免使用相對(duì)路徑時(shí)層次混亂導(dǎo)致書寫錯(cuò)誤
2 方便移動(dòng)文件
1找到項(xiàng)目的 vue.config.js 文件
2 這里的配置
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,// 關(guān)閉Eslint語(yǔ)法檢查
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
},
})3 配置好之后重新運(yùn)行項(xiàng)目就可以使用@符
import '@/style/sass/global.scss' // global css
Vue配置根目錄（用@代替src）
今天發(fā)現(xiàn)了一個(gè)項(xiàng)目中的路徑中有@
比如：
import { getList } from '@/api/table'又或者
import router from '@/router'
學(xué)識(shí)尚淺的我就看不懂了，但是懵懵懂懂又覺(jué)得肯定是哪里配置過(guò)了，@肯定是代替了路徑的一些東西
知識(shí)點(diǎn)
其實(shí)多看幾個(gè)文件就會(huì)發(fā)現(xiàn)了，@代替了src目錄
看出來(lái)代替了什么其實(shí)不難，難點(diǎn)主要是怎么去配置它
配置
1、如果path模塊，則先需要npm引入
npm ?install ?path ?--save
2、配置jsconfig.js
{
? "compilerOptions": {
? ? "baseUrl": "./",
? ? "paths": {
? ? ? ? "@/*": ["src/*"]
? ? }
? },
? "exclude": ["node_modules", "dist"]
}3、配置vue.config.js
方法一：（我看的項(xiàng)目用的）
// 配置configureWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
?
module.exports = {
? configureWebpack: {
? ? name: 'vue Element Admin',
? ? resolve: {
? ? ? alias: {
? ? ? ? '@': resolve('src')
? ? ? }
? ? }
? }
}方法二：
// 配置chainWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
??
module.exports = {
? ? chainWebpack: config => {
? ? ? ? config.resolve.alias
? ? ? ? ? ? .set('@', resolve('src'))
? ? }
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue的computed計(jì)算屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要介紹了vue之封裝多個(gè)組件調(diào)用同一接口的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vite項(xiàng)目無(wú)法使用zangodb包裝器的解決方案
vite作為新一代工具鏈,具有很多便利之處,配置也非常簡(jiǎn)單,它很好地整合了Rollup和其他復(fù)雜的構(gòu)建項(xiàng),并提供了多種方向的典型腳手架模板,深受大家喜愛(ài),本文給大家介紹了如何解決vite項(xiàng)目無(wú)法使用zangodb包裝器的問(wèn)題,需要的朋友可以參考下2023-10-10
vue的過(guò)濾器通常用在一些常見(jiàn)的文本格式化，過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。本文給大家介紹了web前端vue filter 過(guò)濾器的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-01-01
vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)可視化世界地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue樣式綁定的幾種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結(jié)合實(shí)例形式分析了Vue-CLI創(chuàng)建項(xiàng)目與Vuex相關(guān)概念、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法,文中通過(guò)代碼示例講解的講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07