前端框架使用vue-cli （第五层：构建打包层--vue.config.js文件介绍以及环境文件）

这里先简单对vue.config.js这个文件做个介绍背景知识和情况介绍我们最后是把所有的vue-cli文件打包成一个index.html文件这个文件里的内容是我们不好编辑的要提前配置好因为这个东西最后就是部署到nginx文件夹包下浏览器访问这个服务器端口nginx监听这个端口返回给浏览器这个.html文件然后在渲染对应的vue文件在vue实例化之前访问服务器的url接口地址拿到数据渲染页面展现页面。那对于把vue-cli的源文件转化为html文件这个webpack需要配置什么内容。这边介绍一下vue.config.js│├── 工程路径领域│ ├── publicPath│ ├── outputDir│ └── assetsDir│├── 开发服务器领域│ └── devServer│├── API代理领域│ └── proxy│├── webpack构建领域│ ├── configureWebpack│ └── chainWebpack│├── 插件领域│ └── preload/prefetch│├── SVG图标领域│ └── svg-sprite-loader│├── 打包优化领域│ ├── splitChunks│ └── runtimeChunk│├── 安全性能领域│ └── productionSourceMap│└── 代码规范领域└── ESLint我们这里以一个demo例子介绍下use strictconstpathrequire(path)constdefaultSettingsrequire(./src/settings.js)functionresolve(dir){returnpath.join(__dirname,dir)}constnamedefaultSettings.title||物业管理平台// 标题constportprocess.env.port||process.env.npm_config_port||80// 端口// vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只列一部分具体配置参考文档module.exports{// 部署生产环境和开发环境下的URL。// 默认情况下Vue CLI 会假设你的应用是被部署在一个域名的根路径上publicPath:process.env.NODE_ENVproduction?/:/,// 在npm run build 或 yarn build 时 生成文件的目录名称要和baseUrl的生产环境路径一致默认distoutputDir:dist,// 用于放置生成的静态资源 (js、css、img、fonts) 的项目打包之后静态资源会放在这个文件夹下assetsDir:static,// 是否开启eslint保存检测有效值ture | false | errorlintOnSave:process.env.NODE_ENVdevelopment,// 如果你不需要生产环境的 source map可以将其设置为 false 以加速生产环境构建。productionSourceMap:false,// webpack-dev-server 相关配置devServer:{host:0.0.0.0,port:port,open:true,proxy:{// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]:{target:http://localhost:8080,changeOrigin:true,pathRewrite:{[^process.env.VUE_APP_BASE_API]:}}},disableHostCheck:true},configureWebpack:{name:name,resolve:{alias:{:resolve(src)}}},chainWebpack(config){config.plugins.delete(preload)// TODO: need testconfig.plugins.delete(prefetch)// TODO: need test// set svg-sprite-loaderconfig.module.rule(svg).exclude.add(resolve(src/assets/icons)).end()config.module.rule(icons).test(/\.svg$/).include.add(resolve(src/assets/icons)).end().use(svg-sprite-loader).loader(svg-sprite-loader).options({symbolId:icon-[name]}).end()config.when(process.env.NODE_ENV!development,config{config.plugin(ScriptExtHtmlWebpackPlugin).after(html).use(script-ext-html-webpack-plugin,[{// runtime must same as runtimeChunk name. default is runtimeinline:/runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks:all,cacheGroups:{libs:{name:chunk-libs,test:/[\\/]node_modules[\\/]/,priority:10,chunks:initial// only package third parties that are initially dependent},elementUI:{name:chunk-elementUI,// split elementUI into a single packagepriority:20,// the weight needs to be larger than libs and app or it will be packaged into libs or apptest:/[\\/]node_modules[\\/]_?element-ui(.*)/// in order to adapt to cnpm},commons:{name:chunk-commons,test:resolve(src/components),// can customize your rulesminChunks:3,// minimum common numberpriority:5,reuseExistingChunk:true}}})config.optimization.runtimeChunk(single),{from:path.resolve(__dirname,./public/robots.txt),//防爬虫文件to:./,//到根目录下}})}}vue.config.js 配置详解及领域分析一、核心认知vue.config.js 配置的五大领域┌─────────────────────────────────────────────────────────────────────┐ │ vue.config.js 五大配置领域 │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ 领域1部署路径配置 → 项目部署在哪里 │ │ 领域2开发服务器配置 → 本地开发体验 │ │ 领域3webpack 基础配置 → 别名、全局变量 │ │ 领域4webpack 优化配置 → 打包体积、加载性能 │ │ 领域5静态资源处理 → SVG、图片、字体等 │ │ │ └─────────────────────────────────────────────────────────────────────┘二、这个配置完整解析领域1部署路径配置// 部署路径配置publicPath:process.env.NODE_ENVproduction?/:/,// 生产环境和开发环境都用根路径部署outputDir:dist,// 打包输出目录名assetsDir:static,// 静态资源js/css/img放在 dist/static/ 下productionSourceMap:false,// 生产环境不生成 .map 文件减少打包体积为什么需要配置解决的问题publicPath部署到子路径时如/admin/资源路径错误导致 404outputDir默认 dist改其他地方如buildassetsDir想分开放置静态资源便于 nginx 配置缓存规则productionSourceMap默认生成 map 文件很大几 MB生产环境不需要关掉加速构建领域2开发服务器配置devServer:{host:0.0.0.0,// 允许局域网其他设备访问手机测试port:port,// 端口从环境变量读取默认80open:true,// 启动后自动打开浏览器proxy:{// 代理配置解决跨域[process.env.VUE_APP_BASE_API]:{target:http://localhost:8080,// 后端地址changeOrigin:true,// 修改请求头中的 originpathRewrite:{[^process.env.VUE_APP_BASE_API]:// 去掉前缀}}},disableHostCheck:true// 允许通过 IP 访问开发环境常用}代理工作原理前端请求http://localhost:80/api/user ↓ 代理匹配到 /api ↓ 转发到 target: http://localhost:8080 ↓ pathRewrite: 去掉 /api 最终请求http://localhost:8080/user 浏览器看到的是同源请求都是 localhost:80没有跨域问题为什么需要配置解决的问题host: 0.0.0.0手机或同事电脑访问你的开发服务器proxy前端端口 80后端端口 8080跨域被浏览器拦截pathRewrite后端接口路径可能没有/api前缀需要去掉disableHostCheck允许通过 IP 直接访问部署在服务器上时领域3webpack 基础配置configureWebpack:{name:name,// 从 settings.js 读取的标题resolve:{alias:{// 路径别名:resolve(src)// 代表 src 目录}}}别名的作用// 没有别名importutilsfrom../../../../utils/index.js// 有别名 代表 srcimportutilsfrom/utils/index.js为什么需要避免写麻烦的相对路径../../../移动文件时不需要改 import 路径领域4webpack 优化配置最复杂4.1 删除预加载preload/prefetchconfig.plugins.delete(preload)config.plugins.delete(prefetch)preload/prefetch 是什么!-- preload当前页面马上需要的资源提前加载 --linkrelpreloadhrefchunk-vendors.jsasscript!-- prefetch未来可能需要的资源空闲时加载 --linkrelprefetchhrefother-page.js为什么删除项目页面太多时prefetch 会静默加载所有页面的资源造成首次访问时网络请求激增影响性能4.2 代码分割splitChunksconfig.optimization.splitChunks({chunks:all,cacheGroups:{libs:{name:chunk-libs,test:/[\\/]node_modules[\\/]/,// 第三方库priority:10,chunks:initial},elementUI:{name:chunk-elementUI,// element-ui 单独打包priority:20,// 优先匹配test:/[\\/]node_modules[\\/]_?element-ui(.*)/},commons:{name:chunk-commons,test:resolve(src/components),// 公共组件minChunks:3,// 至少被3个地方使用priority:5,reuseExistingChunk:true}}})代码分割效果没有分割 app.js (2MB) → 用户下载 2MB一次加载全部 有分割 chunk-libs.js (800KB) → 第三方库很少变长期缓存 chunk-elementUI.js (300KB) → UI 库单独 chunk-commons.js (200KB) → 公共组件 app.js (100KB) → 业务代码 用户首次下载 1.4MB但第二次访问只需下载变化的 app.js为什么需要加快首次加载并行下载多个小文件利用浏览器缓存第三方库很少变可以长期缓存按需加载用户访问哪个页面才加载那个页面的代码4.3 内联 runtime chunkconfig.plugin(ScriptExtHtmlWebpackPlugin).after(html).use(script-ext-html-webpack-plugin,[{inline:/runtime\..*\.js$/// 把 runtime 文件内联到 HTML}])为什么要内联 runtimeruntime.js 是非常小几KB但很重要的文件管理 webpack 模块加载 如果单独文件多一次 HTTP 请求 内联到 HTML减少一次请求加快首屏加载4.4 复制静态文件{from:path.resolve(__dirname,./public/robots.txt),// 源文件to:./// 目标目录}作用把public/robots.txt复制到dist/根目录robots.txt 作用告诉搜索引擎爬虫哪些页面能抓取 User-agent: * Disallow: /admin/领域5静态资源处理SVG// set svg-sprite-loaderconfig.module.rule(svg).exclude.add(resolve(src/assets/icons)).end()config.module.rule(icons).test(/\.svg$/).include.add(resolve(src/assets/icons)).end().use(svg-sprite-loader).loader(svg-sprite-loader).options({symbolId:icon-[name]// 生成的 symbol id})SVG 雪碧图效果传统方式 每个 SVG 是独立的图片 → 5个图标 5次 HTTP 请求 SVG Sprite 所有 SVG 打包成 1 个文件 使用时通过 use href#icon-home/use 引用 1 次请求即可使用方式template !-- 使用 SVG 图标 -- svg use href#icon-home / /svg /template script // 直接 import SVG 文件 import /assets/icons/home.svg /script三、这些配置解决的实际问题总结领域配置内容解决什么问题部署路径publicPath、outputDir、assetsDir部署位置变化时资源 404开发体验devServer、proxy跨域、局域网访问、热更新代码规范lintOnSave保存时自动检查代码风格构建速度productionSourceMap生产构建太慢、打包太大打包体积splitChunks、preload/prefetch首次加载太慢、网络请求太多长期缓存chunk 分割第三方库每次都要重新下载首屏性能runtime 内联多一次 HTTP 请求SEOrobots.txt搜索引擎抓取规则四、一般需要配置的核心领域大多数 Vue CLI 项目至少需要配置// 最小必备配置module.exports{// 1. 部署路径部署到非根目录时必须publicPath:process.env.NODE_ENVproduction?/my-app/:/,// 2. 开发服务器跨域必须devServer:{proxy:{/api:{target:http://localhost:8080,changeOrigin:true}}},// 3. 路径别名提升开发体验configureWebpack:{resolve:{alias:{:path.resolve(__dirname,src)}}}}五、配置领域对照表┌─────────────────────────────────────────────────────────────────┐ │ 领域 │ 何时需要配置 │ ├─────────────────────────────────────────────────────────────────┤ │ publicPath │ 部署到子路径如 CDN、二级目录 │ │ devServer.proxy│ 前后端分离本地开发跨域 │ │ alias │ 几乎都需要简化 import 路径 │ │ splitChunks │ 项目变大后需要优化加载速度 │ │ productionSourceMap│ 生产构建太慢或打包太大 │ │ lintOnSave │ 团队需要统一代码风格 │ │ SVG Sprite │ 大量使用 SVG 图标 │ │ robots.txt │ 需要 SEO 优化 │ └─────────────────────────────────────────────────────────────────┘六、一句话总结vue.config.js 是 Vue CLI 项目的【总控制台】核心配置五大领域 1. 部署路径配置 → 资源路径正确 2. 开发服务器配置 → 本地调试顺畅 3. Webpack 基础配置 → 开发体验提升 4. Webpack 优化配置 → 打包小、加载快 5. 静态资源处理 → SVG、图片优化3. .env.development / .env.production / .env.staging文件作用环境变量配置文件在构建时注入到代码中。文件内容示例# .env.development开发环境NODE_ENVdevelopmentVUE_APP_API_BASE_URLhttp://localhost:3000/apiVUE_APP_TITLE【开发环境】我的项目# .env.production生产环境NODE_ENVproductionVUE_APP_API_BASE_URLhttps://api.example.com/apiVUE_APP_TITLE我的项目# .env.staging预发布环境NODE_ENVproductionVUE_APP_API_BASE_URLhttps://staging-api.example.com/apiVUE_APP_TITLE【测试环境】我的项目在代码中使用// src/api/request.jsconstbaseURLprocess.env.VUE_APP_API_BASE_URL// 开发环境下http://localhost:3000/api// 生产环境下https://api.example.com/api// 构建时webpack 会把这些变量直接替换成字符串构建时的替换结果// 你写的代码consturlprocess.env.VUE_APP_API_BASE_URL// 生产环境构建后dist/js/app.xxx.js 中consturlhttps://api.example.com/api为什么需要它开发环境调用 localhost 后端 测试环境调用测试服务器 生产环境调用正式服务器 不可能每次打包前手动改代码 → 用环境变量解决构建时指定使用哪个环境# 默认使用 .env.development开发npmrun serve# 使用 .env.production生产npmrun build# 使用 .env.staging预发布npmrun build--modestaging# package.json 中配置scripts:{build:prod:vue-cli-service build --mode production,build:staging:vue-cli-service build --mode staging}