vue-cli搭建的項目咧党,一般會使用到以下配置:
配置目錄別名? ?
build目錄下的webpack.base.conf.js文件中配置別名alias宋舷,具體配置如下:
? ? ? 這樣配置后结笨,我們在任何目錄等級下的文件中引入components文件夾下的文件宰衙,都可以不用寫相對路徑趟畏,改寫成什么呢瘟判,改寫成components/search/searc.vue;比如components文件夾下有a組件和b組件蕉扮,a組件想要引入b組件整胃,壓根不用管a組件所在的文件夾? 跟? b組件所在的文件夾有從幾層關(guān)系,直接可以在a組件中這樣寫import? b from 'components/b組件的目錄'
那如果common目錄下喳钟,我們封裝了很多通用的css和js屁使,js和上面一樣;css的引入跟js還不太一樣奔则。比如我們想在任意組件的style標(biāo)簽中 引入common/style/base.css蛮寂,那么引入方式為@import "~common/style/base.css" ,注意前面的“~”;當(dāng)然一個通用樣式易茬,我們也可以在main.js中引入酬蹋,引入方式是@import "common/style/base.css";注意兩種方式的區(qū)分抽莱。
跨域請求的配置
比如我們自己在Easy Mock上創(chuàng)建了一些假數(shù)據(jù)范抓,頁面中如何請求到easy mock中的假數(shù)據(jù)呢?
需要修改 config目錄下的index.js文件食铐,修改proxyTable參數(shù)匕垫,實(shí)例如下:
開發(fā)環(huán)境下,當(dāng)我們?nèi)フ埱?aaa的目錄時虐呻,webpack-dev-server會將請求轉(zhuǎn)發(fā)至target對應(yīng)的目錄下象泵,比如我請求的地址是?/aaa/first/test寞秃,該代理會將“/aaa”替換成“? ”,實(shí)際請求的地址被轉(zhuǎn)發(fā)至'https://www.easy-mock.com/mock/5d244684f8d8464998ec7340/api/first/test'