Vue如何配置根目錄@(引用路徑)
Vue如何配置根目錄@
首先：@是在路徑訪(fǎng)問(wèn)時(shí)使用的，為了減少層級(jí)引用。
@這是webpack設(shè)置的路徑別名，默認(rèn)指向src。
舊版本在build/webpack.base.conf這個(gè)文件里面定義。
新版本在根目錄下創(chuàng)建在vue.config.js定義。
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
baseUrl: './',
runtimeCompiler: true,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
}
}
vue項(xiàng)目中默認(rèn)定義了@（最常用）和vue$兩個(gè)別名，如果需要，可以自己添加。
Vue配置@作為src根路徑
在跟src同級(jí)的根路徑下找到vue.config.js中作如下配置：
'use strict'
const path = require('path')
function resolve(dir) {
? ? return path.join(__dirname, dir)
}
?
const name = '學(xué)生信息管理系統(tǒng)' // page title
module.exports = {
? ? publicPath: '/',
? ? outputDir: 'dist',
? ? assetsDir: 'static',
? ? configureWebpack: {
? ? ? ? // provide the app's title in webpack's name field, so that
? ? ? ? // it can be accessed in index.html to inject the correct title.
? ? ? ? name: name,
? ? ? ? resolve: {
? ? ? ? ? ? alias: {
? ? ? ? ? ? ? ? // 設(shè)置@/的意義
? ? ? ? ? ? ? ? '@': resolve('src')
? ? ? ? ? ? }
? ? ? ? }
? ? }
}注意vue.config.js是vue-cli3的一個(gè)配置文件，新建的項(xiàng)目可能不會(huì)有這個(gè)文件，需要手動(dòng)創(chuàng)建。
配置完成之后，就可以在vue中使用@作為src的根路徑配置，如下：
<div class="login-center-left">
? ? ? ? <h2><img src="@/assets/logo.png" />{{ title }}</h2>
? ? ? </div>注意在vue文件，style的css中不能使用@來(lái)獲取路徑，CSS loader 會(huì)把把非根路徑的url解釋為相對(duì)路徑， 加~前綴才會(huì)解釋成模塊路徑（~@代表根路徑），例如：
background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left center以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問(wèn)題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue 翻頁(yè)組件vue-flip-page，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
使用vant-uploader上傳照片無(wú)法刪除的解決
這篇文章主要介紹了使用vant-uploader上傳照片無(wú)法刪除的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue2.0 資源文件assets和static的區(qū)別詳解
這篇文章主要介紹了vue2.0 資源文件assets和static的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的方法詳解
這篇文章主要給大家介紹了關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11