Vue2項目配置@指向src路徑方式
更新時間：2022年12月08日 16:16:33 作者：￡白晝の星☆
這篇文章主要介紹了Vue2項目配置@指向src路徑方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue2項目配置@指向src路徑
這樣配置的好處：
1 簡寫路徑 避免使用相對路徑時層次混亂導(dǎo)致書寫錯誤
2 方便移動文件
1找到項目的 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語法檢查
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
},
})3 配置好之后重新運行項目就可以使用@符
import '@/style/sass/global.scss' // global css
Vue配置根目錄（用@代替src）
今天發(fā)現(xiàn)了一個項目中的路徑中有@
比如：
import { getList } from '@/api/table'又或者
import router from '@/router'
學(xué)識尚淺的我就看不懂了，但是懵懵懂懂又覺得肯定是哪里配置過了，@肯定是代替了路徑的一些東西
知識點
其實多看幾個文件就會發(fā)現(xiàn)了，@代替了src目錄
看出來代替了什么其實不難，難點主要是怎么去配置它
配置
1、如果path模塊，則先需要npm引入
npm ?install ?path ?--save
2、配置jsconfig.js
{
? "compilerOptions": {
? ? "baseUrl": "./",
? ? "paths": {
? ? ? ? "@/*": ["src/*"]
? ? }
? },
? "exclude": ["node_modules", "dist"]
}3、配置vue.config.js
方法一：（我看的項目用的）
// 配置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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Vue進(jìn)行數(shù)據(jù)可視化圖表展示的實現(xiàn)示例
數(shù)據(jù)可視化是現(xiàn)代化的數(shù)據(jù)分析和展示方式,可以使數(shù)據(jù)更加直觀、易于理解和傳達(dá),Vue作為一款流行的前端框架,提供了豐富的插件和工具來實現(xiàn)數(shù)據(jù)可視化圖表展示,本文將介紹如何使用Vue和Echarts/D3.js來實現(xiàn)數(shù)據(jù)可視化圖表展示,并提供示例代碼和實際應(yīng)用場景2023-10-10
這篇文章主要介紹了Vue3 Props沒有默認(rèn)值但報錯的解決方案,文中通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vant picker+popup 自定義三級聯(lián)動案例
這篇文章主要介紹了vant picker+popup 自定義三級聯(lián)動案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架，它采用自底向上增量開發(fā)的設(shè)計.這篇文章主要介紹了VueJs 填坑日記之初識 *.Vue文件,需要的朋友可以參考下2017-11-11
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了vue-router 前端路由之路由傳值的方式，本文通過兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
Vue?CLI是一個強(qiáng)大的開發(fā)工具,可用于快速搭建Vue.js項目,在Vue?CLI中使用自定義組件是構(gòu)建交互式和模塊化Web應(yīng)用的重要一環(huán),下面我們就來看看vue?cli中如何使用自定義的組件吧2023-11-11
這篇文章主要介紹了vue實現(xiàn)幾秒后跳轉(zhuǎn)新頁面代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09