洛阳做网站哪家专业成都新冠病最新消息

洛阳做网站哪家专业,成都新冠病最新消息,wordpress禁止截图,seo三人行网站Vue2 老项目里#xff0c;SCSS 和图片路径的“相爱相杀”——从踩坑到优雅Vue2 老项目里#xff0c;SCSS 和图片路径的“相爱相杀”——从踩坑到优雅alias 不是“小老鼠”#xff0c;它是任意门SCSS 引图片的“五连鞭”实战#xff1a;让 sass-loader 乖乖叫“爸爸”翻车现…Vue2 老项目里SCSS 和图片路径的“相爱相杀”——从踩坑到优雅Vue2 老项目里SCSS 和图片路径的“相爱相杀”——从踩坑到优雅alias 不是“小老鼠”它是任意门SCSS 引图片的“五连鞭”实战让 sass-loader 乖乖叫“爸爸”翻车现场Alias 不生效的 4 种“死法”Debug 三板斧肉眼定位 → 机器验证 → 自动化开发体验锦囊把“路径”写成“语法糖”CDN 与世界生产环境如何“无痛切域名”骚操作番外篇SVG 内联、批量引入、PostCSS 自动优化收个尾把“路径”做成团队规范Vue2 老项目里SCSS 和图片路径的“相爱相杀”——从踩坑到优雅“哥我背景图又 404 了”“你路径写对了吗”“我写了../../../assets/img/bg.png啊”“……你数数几个点”如果你也在 Vue2 的老仓库里搬过砖上面这段对话八成耳熟。今天咱们不聊高深的设计模式就聊“怎么让 SCSS 里的图片路径像 JS 模块一样省心”。别小看这点小事路径写错样式崩路径写死重构哭。Webpack 别名alias本是一剂良药却常被我们用成了泻药。下面这段路我陪你从头踩到尾坑边插满 flag保证你下次不再“点数”。alias 不是“小老鼠”它是任意门先给 alias 正个名它不只是import Button from /components/Button的语法糖而是 Webpack 在任何请求资源时都会走的“任意门”。门后长啥样打开vue.config.js或者你手动的webpack.base.conf.js瞄一眼// vue.config.jsconstpathrequire(path);module.exports{chainWebpack:config{config.resolve.alias.set(,path.resolve(__dirname,src)).set(~assets,path.resolve(__dirname,src/assets)).set(~img,path.resolve(__dirname,src/assets/img));}};上面三行代码给项目造了三条捷径别名真实路径project/src~assetsproject/src/assets~imgproject/src/assets/img注意我故意把后两个写成“~”开头就是为了和“”区分——在 SCSS 里Webpack 只会把“~”当成“这是个别名给我解析”的信号。换句话说在 JS 里/assets/img/bg.png能跑在 SCSS 里~assets/img/bg.png才稳。记不住就把“~”想成“波浪号提醒 Webpack别偷懒给我找别名”。SCSS 引图片的“五连鞭”先把祖传代码摆出来看看你都写过哪一招原始社会background: url(../assets/img/bg.png);项目目录一深点对点相对路径直接变“点滑滑梯”少一个点全家 404。引号纠结体background: url(./assets/img/bg.png);加不加引号 Webpack 都认但 sass-loader 7.x 之前有个彩蛋带引号的路径不会被resolve-url-loader再加工结果生产环境路径错得离谱。波浪号尝鲜background: url(~/assets/img/bg.png);乍一看没问题实则“~”叠 buff 多余sass-loader 看到“~”就去调 alias 解析解析完返回的是绝对路径前面再加“”反而会让它以为“哟还有一层别名”——于是给你抛Cant find module的大红字。变量玩家$imgPath: ~img; background: url(#{$imgPath}/bg.png);用 Sass 变量拼接路径本地跑得好好的一上生产 404八成是css-loader的esModule:false和sass-loader的sassOptions.outputStyle没对齐变量替换发生在 Sass 编译之后Webpack 来不及再帮你做 alias 解析。终极形态—— alias 直引background: url(~img/bg.png);干净、利落、无副作用只要保证 sass-loader 和 css-loader 版本别太老这就是官方推荐的“正确答案”。实战让 sass-loader 乖乖叫“爸爸”下面这份配置我连续睡了三年生产环境没翻过车。直接抄不亏。// vue.config.jsconstpathrequire(path);module.exports{css:{loaderOptions:{// 1. 给 sass-loader 塞全局变量省的每个文件手动 importsass:{prependData:import ~/styles/var.scss; import ~/styles/mixin.scss;}}},chainWebpack:config{// 2. 先清掉 Vue 内置的 svg 处理后面想自己玩 inline 请随意config.module.rules.delete(svg);// 3. 加 aliasconfig.resolve.alias.set(,path.resolve(__dirname,src)).set(~img,path.resolve(__dirname,src/assets/img)).set(~icons,path.resolve(__dirname,src/assets/icons));// 4. 保证 url-loader 对 jpg png gif 不抽风config.module.rule(images).test(/\.(png|jpe?g|gif)(\?.*)?$/).use(url-loader).loader(url-loader).options({limit:8192,// 8k 以下转 base64以上吐文件name:img/[name].[hash:8].[ext],publicPath:process.env.NODE_ENVproduction?https://cdn.xxx.com/:/});}};注意第 4 步的publicPath本地开发填/保持相对路径生产环境直接写 CDN 域名上线后图片自动走加速。一条配置开发/生产双吃再也不用给运维同学发“帮忙改下 nginx 反向代理”的工单。翻车现场Alias 不生效的 4 种“死法”文件层级太深目录结构src └─ views └─ user └─ profile └─ index.vue └─ index.scss你在index.scss写background: url(~img/bg.png);编译报错Module not found十有八九是vue-cli默认的resolve.modules只认[node_modules, src]而你的img目录在src/assets下。解决把~img的 alias 指到精确路径或者把src/assets再塞进resolve.modules别让它自己猜。用了变量却忘了 “#{}”sass 变量如果直接放在url()里必须插值$icon: ~icons/close.svg; background: url($icon); // × 变量当字符串Webpack 不解析 background: url(#{$icon}); // √ 插值后变成字面量再走 alias生产环境多了层../本地跑得好好的build 之后路径多了../../浏览器直接 404。原因extract-text-webpack-plugin或mini-css-extract-plugin抽离出来的 CSS 文件层级变了而publicPath没配。解决在vue.config.js里加css:{extract:{publicPath:../../}}或者干脆把图片全扔 CDN别让它们走相对路径。sass-loader 版本“回光返照”老项目升级vue-cli后发现以前能跑的路径全挂。一查 package-locksass-loader 从 7.x 升到 10.x默认开启了sassOptions.outputStyle: compressed导致resolve-url-loader收不到完整路径。解决loaderOptions:{sass:{sassOptions:{outputStyle:expanded// 先展开再交给 resolve-url-loader}}}Debug 三板斧肉眼定位 → 机器验证 → 自动化肉眼定位在 SCSS 里故意写错background: url(~img/nonexist.png);编译时控制台会抛出绝对路径一眼看清 Webpack 到底解析到哪儿。把路径复制出来在磁盘里ls一下90% 的拼写错误当场现形。机器验证装个webpack-bundle-analyzernpmi -D webpack-bundle-analyzer// vue.config.jsconstBundleAnalyzerrequire(webpack-bundle-analyzer).BundleAnalyzerPlugin;module.exports{configureWebpack:{plugins:[newBundleAnalyzer({analyzerPort:8888})]}};build 后浏览器会自动打开一张“资源地图”图片有没有被打包、体积多大、路径长啥样一目了然。自动化给 SCSS 封装一个bg()mixin内部自动拼路径顺便吐调试信息// mixin.scss mixin bg($name, $ext: png) { // 调试阶段输出路径 debug ~img/#{$name}.#{$ext}; background-image: url(~img/#{$name}.#{$ext}); } // 使用 .box { include bg(login-bg, jpg); }开发时npm run serve会在终端打印DEBUG: ~img/login-bg.jpg上线前把debug一行注释掉即可干净无残留。开发体验锦囊把“路径”写成“语法糖”全局变量一把梭// var.scss $imgDir: ~img; $iconDir: ~icons;以后换 CDN 只用改这一行所有组件自动生效。万能 mixin 之 bg-imgmixin bg-img($name, $size: cover, $repeat: no-repeat) { background: url(~img/#{$name}) 0 0 / $size $repeat; }调用.hero { include bg-img(hero.jpg, 100% 100%); }设计师一天改三回图名让 UI 小伙伴自己替换图片即可CSS 一行不动。VS Code 路径提示装插件path-alias再配.vscode/settings.jsonpathAlias.aliasMap:{~img:/src/assets/img,~icons:/src/assets/icons}写样式时敲~i自动弹出补全妈妈再也不用担心我拼错单词。CDN 与世界生产环境如何“无痛切域名”环境变量注入// vue.config.jsconstpublicPathprocess.env.VUE_APP_CDN||/;module.exports{css:{loaderOptions:{sass:{prependData:$cdn: ${publicPath};}}}};// mixin.scss mixin cdn-bg($name) { background-image: url($cdn img/ $name); }本地.env.developmentVUE_APP_CDN/生产.env.productionVUE_APP_CDNhttps://cdn.xxx.com/一条npm run build自动把域名拼进去运维切 CDN 只要改环境变量无需重新打包。缓存戳图片更新后 CDN 缓存不刷新把文件名哈希打开即可上面url-loader已经配了[hash:8]文件一变名就变缓存自动失效。骚操作番外篇SVG 内联、批量引入、PostCSS 自动优化SVG 直接内联省一次 HTTP用svg-url-loader把 SVG 变成 utf-8 编码config.module.rule(svg).use(svg-url-loader).loader(svg-url-loader).options({encoding:utf8,limit:0// 全部转内联});SCSS 里.icon-close { background: url(~icons/close.svg) center / contain no-repeat; }构建后 SVG 被转成url(data:image/svgxml,%3Csvg ...)浏览器不再额外发请求完美。require.context 批量引入雪碧图图标太多一一 import 烦写个 Webpack 脚本// src/assets/icons/index.jsconstreqrequire.context(./,false,/\.svg$/);req.keys().forEach(req);然后在入口main.js引一次即可Webpack 会自动把目录下所有 SVG 打包SCSS 里想用谁就用谁。PostCSS 自动压缩背景图装插件npmi -D postcss-url// postcss.config.jsmodule.exports{plugins:[require(postcss-url)({url:inline,// 小于 8k 自动转 base64maxSize:8})]};构建阶段再优化一遍小图直接内联大图保持外链无需手动干预。收个尾把“路径”做成团队规范README 里画一张“资源地图”src ├─ assets │ ├─ img → ~img │ ├─ icons → ~icons │ └─ fonts → ~fonts新成员第一天 clone 仓库就能看懂不用挨个问“师兄背景图放哪”。Code Review 加一条“路径 linter”用stylelint插件stylelint-declaration-strict-value禁止出现../assets这样的相对路径{rules:{declaration-strict-value:[/^url/,{ignoreValues:[~]}]}}一旦有人手滑写../../CI 直接飘红把问题拦在合并之前。把 mixin 和变量当成“官方 SDK”维护谁新增全局目录就在var.scss里补一条别名再补一个对应的 mixin。半年后回来看代码风格依旧整齐不会像祖传项目那样“一半 alias 一半点点点”。写到这里差不多 6 公里长。下次再看到../../../这种“摩斯密码”别心软直接 refactor 成~img/xxx.png然后对同事摊手“别名真好用早换早下班。”完欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进