vue配置根目錄詳細(xì)步驟(用@代表src目錄)
簡介
本文介紹vue如何配置根目錄（用@代表src目錄）。
默認(rèn)情況下是不能用@代替/src的，需要經(jīng)過配置才可以。
根目錄的用法
在Vue中的JS里使用
vue通常會(huì)用@來代表項(xiàng)目的src目錄。這樣一來，輸入路徑時(shí)就不用輸入/src了，可以直接用@來替換。
例如：有一個(gè)vue文件，路徑為：/src/layout/index.vue，如下圖所示：
如果直接導(dǎo)入，則代碼應(yīng)該這么寫：
import Layout from '/src/layout'
如果使用@來替換，就更簡潔了：
import Layout from '@/layout'
在Vue文件的CSS里使用
可以這樣使用：
<div class="login-center-left">
<h2><img src="@/assets/logo.png" />{{ title }}</h2>
</div>注意
vue文件里style的css中不能使用@來獲取路徑，CSS loader 會(huì)把把非根路徑的url解釋為相對路徑。
解決方案：加~前綴（~@代表根路徑） 。即：加~前綴才會(huì)解釋成模塊路徑
例如：
background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left centervue cli3及之后的配置
步驟1：配置jsconfig.js
位置：項(xiàng)目根目錄/jsconfig.js
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
// @ 不能在以下目錄的文件中使用
"exclude": ["node_modules", "dist"]
}步驟2：配置vue.config.js
位置：項(xiàng)目根目錄/vue.config.js
法1：配置chainWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
}
}法2：配置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')
}
}
}
}vue cli2的配置
webpack.base.conf（位置：項(xiàng)目根目錄/config/webpack.base.conf）
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'#'：resolve('statis')
}
}總結(jié)
到此這篇關(guān)于vue配置根目錄(用@代表src目錄)的文章就介紹到這了,更多相關(guān)vue配置根目錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Router根據(jù)后臺(tái)數(shù)據(jù)加載不同的組件實(shí)現(xiàn)
本文主要介紹了根據(jù)用戶所購買服務(wù)的不同，有不同的頁面展現(xiàn)。文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Echarts是一個(gè)與框架無關(guān)的JS圖表庫,但是它基于Js,這樣很多框架都能使用它,下面這篇文章主要給大家介紹了關(guān)于在vue中使用echarts的方法以及可能遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)把頁面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下2023-10-10
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Vue指令，Vue官網(wǎng)一共有提供了14個(gè)指令，下面我們就來詳細(xì)講解每一個(gè)指令的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
Vue3中引入SCSS和LESS依賴的基本步驟和注意事項(xiàng)
我們項(xiàng)目開發(fā)中經(jīng)常遇到樣式里面會(huì)使用less和scss寫法, less,scss和stylus都是css的預(yù)處理器,這篇文章主要給大家介紹了關(guān)于Vue3中引入SCSS和LESS依賴的基本步驟和注意事項(xiàng),需要的朋友可以參考下2024-05-05
vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容
這篇文章主要介紹了vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價(jià)值，感興趣的可以了解一下2023-09-09
vue項(xiàng)目npm?run?build打包dist文件及打包后空白解決辦法
npm run build 這個(gè)命令會(huì)執(zhí)行Vue CLI中預(yù)定義的打包配置,并將打包后的文件存放在"dist"文件夾中,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目npm?run?build打包dist文件及打包后空白的解決辦法,需要的朋友可以參考下2023-10-10
vue實(shí)現(xiàn)聊天框自動(dòng)滾動(dòng)的示例代碼
本文主要介紹了vue實(shí)現(xiàn)聊天框自動(dòng)滾動(dòng)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05