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)寫(xiě)路徑 避免使用相對(duì)路徑時(shí)層次混亂導(dǎo)致書(shū)寫(xiě)錯(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)文章
Pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Vue進(jìn)行數(shù)據(jù)可視化圖表展示的實(shí)現(xiàn)示例
數(shù)據(jù)可視化是現(xiàn)代化的數(shù)據(jù)分析和展示方式,可以使數(shù)據(jù)更加直觀、易于理解和傳達(dá),Vue作為一款流行的前端框架,提供了豐富的插件和工具來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,本文將介紹如何使用Vue和Echarts/D3.js來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,并提供示例代碼和實(shí)際應(yīng)用場(chǎng)景2023-10-10
Vue3 Props沒(méi)有默認(rèn)值但報(bào)錯(cuò)的解決方案
這篇文章主要介紹了Vue3 Props沒(méi)有默認(rèn)值但報(bào)錯(cuò)的解決方案,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例
這篇文章主要介紹了vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架，它采用自底向上增量開(kāi)發(fā)的設(shè)計(jì).這篇文章主要介紹了VueJs 填坑日記之初識(shí) *.Vue文件,需要的朋友可以參考下2017-11-11
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了vue-router 前端路由之路由傳值的方式，本文通過(guò)兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vue?CLI是一個(gè)強(qiáng)大的開(kāi)發(fā)工具,可用于快速搭建Vue.js項(xiàng)目,在Vue?CLI中使用自定義組件是構(gòu)建交互式和模塊化Web應(yīng)用的重要一環(huán),下面我們就來(lái)看看vue?cli中如何使用自定義的組件吧2023-11-11
vue實(shí)現(xiàn)幾秒后跳轉(zhuǎn)新頁(yè)面代碼
這篇文章主要介紹了vue實(shí)現(xiàn)幾秒后跳轉(zhuǎn)新頁(yè)面代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09