@vue/cli4.x版本的vue.config.js常用配置方式
@vue/cli4.x的vue.config.js常用配置
設(shè)置訪問(wèn)端口號(hào)、訪問(wèn)IP地址、跨域代理,路徑別名
const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件需要npm安裝 function resolve(dir) { return path.join(__dirname, dir) } module.exports = { // // 關(guān)閉eslint校驗(yàn), 項(xiàng)目開(kāi)發(fā)中建議開(kāi)啟。這個(gè)只是在特殊情況下方便測(cè)試時(shí)關(guān)閉 // devServer: { // overlay: { // warining: true, // errors: true, // }, // }, // lintOnSave: false, // 配置部署應(yīng)用包時(shí)的基本 URL(如果有需要,發(fā)現(xiàn)放到服務(wù)器上靜態(tài)資源路徑請(qǐng)求不對(duì)的情況可以看著修改) // publicPath: process.env.NODE_ENV === 'production' // ? '/winne-test/' // : '/' lintOnSave: 'error', // 設(shè)置eslint報(bào)錯(cuò)時(shí)停止代碼編譯 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: 'http://www.exaple.com', // 代理接口地址 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)化) preload 插件的用途:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload 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') // } } } } } }
vue-cli4.*配置vue.config.js文件配置內(nèi)容不生效
使用vue-cli時(shí)系統(tǒng)會(huì)自動(dòng)幫我們做好一些通用的配置,當(dāng)我們需要自己再單獨(dú)定義一些配置時(shí),只需在項(xiàng)目根目錄下創(chuàng)建vue.config.js,然后在這個(gè)文件里面添加配置即可。
但是在項(xiàng)目中發(fā)現(xiàn)更改vue.config.js的內(nèi)容后并沒(méi)有起到任何效果
解決
每次更新完vue.config.js停掉熱部署(npm run serve),然后再重新開(kāi)啟服務(wù)。
目錄結(jié)構(gòu):
vue.config.js配置示例:
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解
這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06vuex實(shí)現(xiàn)的簡(jiǎn)單購(gòu)物車功能示例
這篇文章主要介紹了vuex實(shí)現(xiàn)的簡(jiǎn)單購(gòu)物車功能,結(jié)合實(shí)例形式分析了vuex購(gòu)物車組件相關(guān)商品列表、購(gòu)物車創(chuàng)建、添加、刪除、清空等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02Vue開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn)總結(jié)
vue是法語(yǔ)中視圖的意思,Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù),同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn),有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue3源碼通過(guò)render?patch?了解diff
這篇文章主要為大家介紹了Vue3源碼系列通過(guò)render及patch了解diff原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11