《95%开发者不知道的vue.config.js高阶玩法》手撕Webpack配置链/SSR优化/多页应用,3倍构建效率实战方案

news/2025/3/17 20:27:03/文章来源:https://www.cnblogs.com/lyflexi/p/18777506

Vue工程化配置指南:vue.config.js深度解析

一、初始化配置文件

在Vue CLI工程根路径下创建配置文件:

项目层级示意:

your-project/
├── src/
├── public/
├── package.json
└── vue.config.js  # 新增配置文件

基本模板结构:

module.exports = {// 工程化配置区域
}

二、核心配置参数解析

部署路径设置(publicPath)

功能说明:控制静态资源访问路径

预设值:开发环境'/',生产环境'/'

环境适配方案:

publicPath: process.env.NODE_ENV === 'production' ? '/cdn-path/' : '/dev-path/'

构建产物路径(outputDir)

功能说明:指定编译输出目录

默认路径:'dist'

自定义示例:

outputDir: 'release'

资源存储路径(assetsDir)

功能说明:静态资源子目录设置

初始值:空字符串

配置案例:

assetsDir: 'assets'

三、开发环境调优

本地服务配置模板:

devServer: {host: '0.0.0.0',    // 开放IP访问hotOnly: true,      // 热更新控制proxy: {            // 接口代理'/gateway': {target: 'http://api.domain.com',ws: true,secure: false}}
}

四、Webpack深度定制

链式配置方法(chainWebpack)

应用场景:模块规则扩展

SVG图标处理案例:

chainWebpack: config => {config.module.rule('custom-svg').test(/\.svg$/).use('svg-loader').loader('svg-sprite-loader')
}

配置融合方法(configureWebpack)

功能特性:支持对象合并或函数式覆盖

生产环境专用配置:

configureWebpack: config => {if (process.env.NODE_ENV === 'production') {config.optimization.minimizer = [new TerserPlugin()]}
}

五、进阶工程配置

样式预处理配置

css: {modules: true,  // 启用CSS模块化loaderOptions: {less: {globalVars: {primaryColor: '#1890ff'}}}
}

多入口方案

pages: {mobile: {entry: 'src/mobile-entry.js',chunks: ['vendor', 'mobile']},desktop: {entry: 'src/desktop-entry.js',chunks: ['vendor', 'desktop']}
}

构建优化策略

{filenameHashing: false,   // 关闭哈希文件名runtimeCompiler: true,    // 启用运行时编译transpileDependencies: ['vuex-persist']  // 特殊依赖转译
}

配置系统运作原理

  1. 配置叠加机制

采用webpack-chain实现配置链式管理

用户配置优先级高于CLI默认配置

数组合并策略为覆盖式而非追加式

  1. 环境变量注入流程
.env.local → .env.[mode] → 全局默认
  1. 构建过程阶段划分

基础配置(Base Config)

客户端构建(Client Build)

服务端渲染(SSR Build)

现代模式构建(Modern Build)

企业级配置参考

const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {publicPath: './',outputDir: 'dist',assetsDir: 'static',lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: false,devServer: {port: 8080,proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: { '^/api': '' }}}},chainWebpack: config => {config.resolve.alias.set('@', resolve('src'))},configureWebpack: {plugins: [// 自定义插件]},css: {extract: true,loaderOptions: {scss: {additionalData: `@import "~@/styles/variables.scss";`}}}
}

导出完整webpack配置

vue inspect --mode=stage > debug.config.js

查看特定规则配置

vue inspect module.rules.10

关键注意点

路径别名推荐使用@指向src目录

生产环境建议关闭sourcemap提升安全性

大文件加载推荐配置externals进行CDN引入

定期运行vue-cli-service build --report分析包体积

Reference:

Webpack 官方文档:https://webpack.js.org/

Vue CLI 配置参考:https://cli.vuejs.org/config/

webpack-chain 文档:https://github.com/neutrinojs/webpack-chain

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/900552.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElevenLabs 33 亿美元估值的秘密:技术驱动+用户导向的「小熊软糖」团队丨Voice Agent 学习笔记

图:Emmanuel Ashun / Endeavor大家好,这是 Voice Agent 学习笔记系列的第 23 篇,我是课代表十三🧑‍💻。ElevenLabs 是一家专注于人工智能语音技术的创新公司,致力于重新定义音频体验。凭借其突破性的语音克隆和配音工具,ElevenLabs 正在重塑音频内容创作的未来,让高…

分布式服务幂等性问题如何解决

在分布式系统中解决幂等性问题是保证系统健壮性的关键挑战之一。以下从原理到实践的完整解决方案,涵盖7种核心模式及落地实现细节:一、幂等性问题本质 核心定义:相同请求多次执行对系统状态的影响 = 执行一次的结果 产生场景:网络抖动导致客户端重复提交 服务端超时后重试机…

一图看懂|2025年经济社会发展10大主要任务

一图看懂|2025年经济社会发展10大主要任务

新朋友:线段树

目录认识线段树和他的梦想 实现梦想之有个小身板 实现梦想之一点一点查 实现梦想之一点一点变 实现梦想之一坨一坨查 实现梦想之一坨一坨变 实现梦想之…不,没能力帮你了1. 认识线段树和他的梦想 差分想必大家都认识,它是可以进行区间加与区间减,但是要查询某个区间的和。他…

攻防世界 get_shell WriteUp

WriteUp 题目信息 来源:攻防世界 名称:get_shell 分类:Pwn 描述:运行就能拿到shell呢,真的题目链接: https://adworld.xctf.org.cn/challenges/list解题思路 首先使用DIE对文件进行查壳,发现这是一个64位ELF文件,所以选择使用64位IDA对文件进行反汇编。发现可以直接运行…

分享一个我遇到过的“量子力学”级别的BUG。

你好呀,我是歪歪。 前几天在网上冲浪的时候,看到知乎上的这个话题:一瞬间,一次历史悠久但是记忆深刻的代码调试经历,“刷”的一下,就在我的脑海中蹦出来了。 虽然最终定位到的原因令人无语,对于日常编码也没啥帮助,但是真的是:情景再现 我记得当时我是学习 Concurren…

day:23 python模块——时间,random,string

一、模块的介绍 (1)python模块,是一个python文件,以一个.py文件,包含了python对象定义和pyhton语句(2)python对象定义和python语句 (3)模块让你能够有逻辑地组织你的python代码段。 (4)把相关的代码分配到一个模块里能让你的代码更好用,更易懂 (5)模块能定义函数…

实验一:Tableau数据可视化入门

实验目的:1.熟悉TableauDesktop使用方法。2.通过Tableau软件来实现Excel中数据的基本可视化。 实验原理: Tableau是新一代商业智能工具软件,它将数据连接、运算、分析与图表结合在 一起,通过拖放方式创建各种图表。 Tableau产品包括TableauDesktop、Tableauserver、Tableau…

实验二:D3数据可视化基础

实验目的:熟悉 D3 数据可视化的使用方法。 实验原理:D3 的全称是(Data-Driven Documents),是一个被数据驱动的文档,其实就是 一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。本次实践主要介绍D3一些最基本的使用方法,以及生成一些比较简单的图表。D3 是一个…

PCB的通孔、盲孔、埋孔|元器件的符号和封装

他们的本质都是用来切换的层的通孔:从顶层到底层,可以看到头 盲孔:看不到头的,如图从第一层切换到了第二层 埋孔:顾名思义就是埋进去了,无论从正面还是反面都是看不到的,它是处于内层的原理图就是一个表示符号,封装是元器件具体实物大小,具体形状

在IDEA编辑器中,如何在.gitignore 的文件中,把 .ides 的文件忽略,提交git的时候不提交 .idea文件夹

方法 1:直接编辑 .gitignore 文件创建或编辑 .gitignore 文件在项目根目录(与 .git 文件夹同级)右键点击 → New → File,输入文件名 .gitignore。如果已存在 .gitignore,直接双击打开。添加忽略规则在 .gitignore 文件中添加以下内容:# 忽略所有 .idea 目录及其内容 .id…

揭秘EtherCAT转profinet玻璃制造厂的复杂生产环境与智能设备运用

玻璃制造厂的生产环境都比较复杂,需要严格的操作规程,及安全规范。玻璃制造厂的生产环境通常具有以下特点:高温环境:玻璃的熔化过程需要在高温下进行,熔炉的温度通常达到1400℃以上。因此,厂房内的设备和材料必须能够耐高温,并具备良好的隔热性能。 粉尘和化学物质:在玻…