Vue如何配置根目錄@(引用路徑)

更新時間：2022年04月19日 14:46:23 作者：reisaru

這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue如何配置根目錄@

首先：@是在路徑訪問時使用的，為了減少層級引用。

@這是webpack設(shè)置的路徑別名，默認(rèn)指向src。

舊版本在build/webpack.base.conf這個文件里面定義。

新版本在根目錄下創(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項目中默認(rèn)定義了@（最常用）和vue$兩個別名，如果需要，可以自己添加。

Vue配置@作為src根路徑

在跟src同級的根路徑下找到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的一個配置文件，新建的項目可能不會有這個文件，需要手動創(chuàng)建。

配置完成之后，就可以在vue中使用@作為src的根路徑配置，如下：

<div class="login-center-left">
? ? ? ? <h2><img src="@/assets/logo.png" />{{ title }}</h2>
? ? ? </div>

注意在vue文件，style的css中不能使用@來獲取路徑，CSS loader 會把把非根路徑的url解釋為相對路徑，加~前綴才會解釋成模塊路徑（~@代表根路徑），例如：

background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left center

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決
使用ElementUI的el-table后,偶然發(fā)現(xiàn)出現(xiàn)行列錯位、對不齊問題,下面這篇文章主要給大家介紹了關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
element-ui 表格實現(xiàn)單元格可編輯的示例
下面小編就為大家分享一篇element-ui 表格實現(xiàn)單元格可編輯的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vuex actions傳遞多參數(shù)的處理方法
今天小編就為大家分享一篇vuex actions傳遞多參數(shù)的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
 vue-element-admin是一個純前端的框架，左側(cè)菜單是根據(jù)路由生成的。實際開發(fā)中經(jīng)常需要根據(jù)當(dāng)前登陸人員的信息從后端獲取菜單進(jìn)行展示，本文將詳細(xì)介紹如何實現(xiàn)該功能
2021-04-04
vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue實現(xiàn)按需加載組件及異步組件功能
這篇文章主要介紹了vue實現(xiàn)按需加載組件和異步組件，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-05-05
vue2.x與vue3.x中自定義指令詳解(最新推薦)
vue自定義指令(2.x丨3.x)可以幫助我們實現(xiàn)需要操作，比如防抖、節(jié)流、懶加載、輸入框自動聚焦等等，使用起來非常方便，比如vue自帶的v-text、v-html、v-show、v-if等等,這篇文章主要介紹了vue2.x與vue3.x中自定義指令詳解,需要的朋友可以參考下
2022-12-12
Vue 中對圖片地址進(jìn)行拼接的方法
今天小編就為大家分享一篇Vue 中對圖片地址進(jìn)行拼接的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09