1茄厘,vue.config.js
最近安裝了下vue cli3版本唐瀑, 和vue cli2 相比文件目錄少了很多配置宗雇,沒有了build和config目錄,那么像vue cli2 之前的關(guān)于端口號的配置别伏,打包之后路徑的配置蹄衷,圖片的配置 等等,應該去哪里配置呢?? ? ? ? ? ? ? ? ? ? vue cli3 可以在項目根目錄新建一個vue.config.js文件(和package.json)平級厘肮,像之前的很多繁瑣配置宦芦,都可以在這個文件里配置啦
注意:vue.config.js 是一個可選的配置文件,如果項目的 (和 package.json 同級的) 根目錄中存在這個文件轴脐,那么它會被 @vue/cli-service 自動加載调卑。你也可以使用 package.json 中的 vue 字段,但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫大咱。
2恬涧,處理css預加載
比如使用less
1,可以在創(chuàng)建項目的時候選擇使用的預處理器
2碴巾,如果創(chuàng)建項目的時候選的默認溯捆,內(nèi)置的 webpack 仍然會被預配置為可以完成所有的處理,我們只需要手動安裝處理預處理器的loader即可厦瓢,比如:
# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
3提揍,導入相應的文件類型(例如less),比如在main.js中引入事先寫好的style.less,在*.vue文件中這樣來使用:
<style lang="less">
</less>
進階:向預處理器loader傳遞選項
解決問題:比如向所有的less樣式傳入共享的全局變量煮仇,定義的less變量在variables.less文件中定義劳跃,如果每個less文件中都需要引入,就需要我們一個一個引入比較麻煩浙垫,通過配置vue.config.js
解決方法:配置vue.config.js文件中的css.loaderOptions選項
代碼: