vueCli4如何配置vue.config.js文件
vueCli4配置vue.config.js
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') //cnpm install --save-dev compression-webpack-plugin插件需要npm安裝
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './', //基本路徑
outputDir: 'dist', //輸出文件目錄
assetsDir: 'static', //css js 等靜態(tài)文件目錄
// lintOnSave: 'error', // 設(shè)置eslint報(bào)錯(cuò)時(shí)停止代碼編譯
lintOnSave: false,
productionSourceMap: false, // 不需要生產(chǎn)環(huán)境的 source map(減小dist文件大小,加速構(gòu)建)
devServer: {
open: true, // npm run serve后自動(dòng)打開(kāi)頁(yè)面
host: '0.0.0.0', // 匹配本機(jī)IP地址(默認(rèn)是0.0.0.0)
port: 8989, // 開(kāi)發(fā)服務(wù)器運(yùn)行端口號(hào)
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_URL, // 代理接口地址
secure: false, // 如果是https接口,需要配置這個(gè)參數(shù)
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' //需要rewrite的, 這里理解成以'/api'開(kāi)頭的接口地址,把/api代替target中的地址
}
}
}
},
chainWebpack: (config) => {
// 移除 prefetch 插件(針對(duì)生產(chǎn)環(huán)境首屏請(qǐng)求數(shù)進(jìn)行優(yōu)化)
config.plugins.delete('prefetch')
// 移除 preload 插件(針對(duì)生產(chǎn)環(huán)境首屏請(qǐng)求數(shù)進(jìn)行優(yōu)化)
config.plugins.delete('preload')
// 第1個(gè)參數(shù):別名,第2個(gè)參數(shù):路徑 (設(shè)置路徑別名)
config.resolve.alias
.set('@pages', resolve('./src/page'))
.set('@router', resolve('./src/router'))
.set('@store', resolve('./src/store'))
.set('@utils', resolve('./src/utils'))
},
// 配置打包 js、css文件為.gz格式,優(yōu)化加載速度 (參考:https://blog.csdn.net/qq_31677507/article/details/102742196)
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.css/, // 匹配文件
threshold: 10240, // 超過(guò)10kB的數(shù)據(jù)進(jìn)行壓縮
deleteOriginalAssets: false // 是否刪除原文件 (原文件也建議發(fā)布到服務(wù)器以支持不兼容gzip的瀏覽器)
})],
performance: { // 生產(chǎn)環(huán)境構(gòu)建代碼文件超出以下配置大小會(huì)在命令行中顯示警告
hints: 'warning',
// 入口起點(diǎn)的最大體積 整數(shù)類型(以字節(jié)為單位,默認(rèn)值是:250000 (bytes))
maxEntrypointSize: 5000000,
// 生成文件的最大體積 整數(shù)類型(以字節(jié)為單位,默認(rèn)值是:250000 (bytes))
maxAssetSize: 3000000
// // 只給出 js 文件的性能提示
// assetFilter: function (assetFilename) {
// return assetFilename.endsWith('.js')
// }
}
}
}
}
}
vueCli4配置文件路徑別名及使用
在開(kāi)發(fā)vue項(xiàng)目中,我們經(jīng)常需要引入不同的文件,這時(shí)就需要針對(duì)文件的路徑進(jìn)行設(shè)置,僅僅使用./ .//來(lái)進(jìn)行文件的導(dǎo)入,維護(hù)和更改都變的相當(dāng)麻煩,需要對(duì)文件的路徑相當(dāng)熟悉才可以
所以可以設(shè)置alias別名來(lái)方便操作,然后腳手架cli4中并沒(méi)有和cli2一樣自動(dòng)生成一個(gè)webpack.base.config.js文件來(lái)讓我們直接寫(xiě)別名。所以需要我們自行創(chuàng)建,步驟如下:
項(xiàng)目根目錄下創(chuàng)建vue.config.js文件
與package.json 同級(jí)目錄

配置文件中寫(xiě)入一下代碼
// 用來(lái)配置文件的別名,方便路徑的尋找
const path = require('path');//引入path模塊
function resolve(dir){
return path.join(__dirname,dir)//path.join(__dirname)設(shè)置絕對(duì)路徑
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
//set第一個(gè)參數(shù):設(shè)置的別名,第二個(gè)參數(shù):設(shè)置的路徑
.set('@',resolve('./src'))//根據(jù)目錄的層級(jí)來(lái)決定,也可以自行設(shè)
.set('components',resolve('./src/components'))
.set('views',resolve('./src/views'))
.set('assets',resolve('./src/assets'))
}
}
別名的使用
1:HTML-Dom中使用:需要在前面加上 ~
2:css中可以直接使用
3:router路由配置中:直接使用


以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue鍵盤(pán)事件點(diǎn)擊事件加native操作
這篇文章主要介紹了vue鍵盤(pán)事件點(diǎn)擊事件加native操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue + webpack如何繞過(guò)QQ音樂(lè)接口對(duì)host的驗(yàn)證詳解
這篇文章主要給大家介紹了關(guān)于利用vue + webpack如何繞過(guò)QQ音樂(lè)接口對(duì)host的驗(yàn)證的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖
今天小編就為大家分享一篇在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue.use與Vue.prototype的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
vue自動(dòng)化路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自動(dòng)化路由的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在antd Form表單中select設(shè)置初始值操作
這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue react中的excel導(dǎo)入和導(dǎo)出功能
當(dāng)我們把信息化系統(tǒng)給用戶使用時(shí),用戶經(jīng)常需要把以前在excel里錄入的數(shù)據(jù)導(dǎo)入的信息化系統(tǒng)里,這樣為用戶提供了很大的方便,這篇文章主要介紹了vue中或者react中的excel導(dǎo)入和導(dǎo)出,需要的朋友可以參考下2023-09-09

