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)文章
Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
最近需要做個(gè)需求，需要做到element Table表格組件多字段(多列)排序，本文就詳細(xì)的介紹一下方法，感興趣的可以了解一下2021-09-09
Vue3組件不發(fā)生變化如何監(jiān)聽(tīng)pinia中數(shù)據(jù)變化
這篇文章主要給大家介紹了關(guān)于Vue3組件不發(fā)生變化如何監(jiān)聽(tīng)pinia中數(shù)據(jù)變化的相關(guān)資料,pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決
這篇文章主要介紹了Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue.js 子組件無(wú)法獲取父組件store值的解決方式
今天小編就為大家分享一篇vue.js 子組件無(wú)法獲取父組件store值的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要為大家介紹了vue-print-nb只打印一頁(yè)解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-11-11
vue組件 keep-alive 和 transition 使用詳解
這篇文章主要介紹了vue組件 keep-alive 和 transition 使用詳解,需要的朋友可以參考下2019-10-10
nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼
這篇文章主要介紹了nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問(wèn)題及解決辦法
這篇文章主要介紹了關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問(wèn)題及解決辦法,本文給大家分享問(wèn)題所在原因及解決方案,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08