Vue CL3 配置路徑別名詳解
更新時(shí)間：2019年05月30日 11:43:49 作者：Dragon_慕碼人
這篇文章主要介紹了Vue CL3 配置路徑別名詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
Cli3工具中，配置路徑別名
最近用Vue Cli3腳手架搭建了Vue項(xiàng)目，發(fā)現(xiàn)沒(méi)有build目錄了，里面的webpack相關(guān)的也沒(méi)了，看了官方文檔后，查了資料后，發(fā)現(xiàn)都在vue.config.js里來(lái)配置了
配置路徑別名，方便引用，不用寫(xiě)那么長(zhǎng)
配置前:
import TodoList from '../../components/TodoList'
配置后(不用再關(guān)心文件層級(jí)關(guān)系):
import TodoList from 'components/TodoList'
在根目錄下添加'vue.config.js',
添加如下代碼：
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: true,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('layout', resolve('src/layout'))
}
}
使用:
import TodoList from 'components/TodoList'
注意事項(xiàng)
- vue.config.js文件創(chuàng)建完后，不需要什么操作，@vue/cli-service會(huì)自己識(shí)別，如果出現(xiàn)報(bào)錯(cuò)等等，可以先嘗試重啟下IDE或者啟動(dòng)下項(xiàng)目
- vue.config.js在vue項(xiàng)目創(chuàng)建后，默認(rèn)是沒(méi)有的，是一個(gè)可選的文件
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
watch 函數(shù)是 Vue.js 提供的一個(gè)強(qiáng)大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過(guò)合理使用 watch 函數(shù),我們可以實(shí)現(xiàn)異步數(shù)據(jù)請(qǐng)求、表單驗(yàn)證、動(dòng)態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
vue路由導(dǎo)航守衛(wèi)和請(qǐng)求攔截以及基于node的token認(rèn)證的方法
這篇文章主要介紹了vue路由導(dǎo)航守衛(wèi)和請(qǐng)求攔截以及基于node的token認(rèn)證的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
解決vue-cli創(chuàng)建項(xiàng)目的loader問(wèn)題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項(xiàng)目的loader問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看看吧2018-03-03
vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了vue如何自定義按鈕單選和多選問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細(xì)的介紹了如何添加規(guī)則內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了Vue精簡(jiǎn)版風(fēng)格指南的相關(guān)資料，包括組件名稱(chēng)，指令及特征,需要的朋友可以參考下2018-01-01
Vue動(dòng)態(tài)路由緩存不相互影響的解決辦法
這篇文章主要介紹了Vue動(dòng)態(tài)路由緩存不相互影響的解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Vue Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
本文介紹了Vue keep-alive組件的使用及如何清除緩存,給大家分享清除緩存的幾種方法,結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友跟隨小編一起看看吧2023-10-10