vue项目打包后css背景图路径不对的问题

问题描述： 自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图： 当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比 图一：使用npm run dev命令访问   图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图   解决办法： 解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。

添加位置为如下图：   然后重新执行 npm run build 命令，即可成功显示图片   from:https://www.cnblogs.com/libo0125ok/p/9361038.html

微信小程序 使用webview 缓存解决办法

场景： 1.内嵌使用的是 vue + webpack 打包的单页面 2.更新内容后，webview里面的内容无法更新， 解决办法 1.在url后面加时间戳， 这个在苹果可以实时解决缓存，安卓有些机子不行 2.在安卓机子不行的时候，需要在webpack打包的时候加上 hash配置，不懂hash配置的，可以百度一下， 并且在index.html 里面meta标签加上http-equiv=“cache-control” content=“no-cache” 3.以上能解决新的打包项目在webview 缓存问题， 4.因为原先已经有缓存，进不到新打包的项目里面，走不到新的代码，所有还是会存在缓存问题，只需微信打开http://debugtbs.qq.com，然后根据里面提示，进入页面，里面有一个清除本地缓存选项，清除后，下次进去就可以了。 5.完美解决webview缓存问题 ———————————————— 版权声明：本文为CSDN博主「qq_39260927」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_39260927/article/details/110558497

微信小程序webview的缓存问题

前言 小程序webview的页面缓存会影响开发中的调试和生产中的使用 解决 1.页面缓存由浏览器缓存引起，那么可以通过设置来修改浏览器缓存。 可以通过nginx设置cache-control 来关闭浏览器缓存 2.由于是单页面应用，所以只需要对index.html设置即可。 对index.html中的资源地址，也会存在缓存，可以通过webpack构建时加入hash值解决。 作者：依然还是或者其他 链接：https://www.jianshu.com/p/e0363ff16b34 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Nginx配置禁止缓存

location / { #如果expires 和 add_header 同时开启的情况下，则add_header优于expires生效 #Cache-Control比Expires可以控制的多一些， 而且Cache-Control会重写Expires的规则 #设置禁止浏览器缓存，每次都从服务器请求 add_header Cache-Control no-cache; add_header Cache-Control private; #设置缓存上面定义的后缀文件缓存到浏览器的生存时间 expires -1s; proxy_pass  http://…; } ———————————————— 版权声明：本文为CSDN博主「风暴幽居」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/shuiyuetianwy/article/details/98938530   光子补充：

这些开源项目，让你轻松应对十大工作场景

俗话说得好，工欲善其事必先利其器。本文阿宝哥将介绍一些优秀的开源项目，利用这些开源项目，你将能能轻松应对以下十个工作场景：文件上传、图片处理、文档处理、网络请求、数据存储、微前端、表单设计器、H5 页面设计器、文档管理和 API 管理。 阅读阿宝哥近期热门文章（感谢掘友的鼓励与支持🌹🌹🌹）： 77.9K Star 的 Axios 项目有哪些值得借鉴的地方（1018+ 个👍） 使用这些思路与技巧，我读懂了多个优秀的开源项目（724+ 个👍） 这些高阶的函数技术，你掌握了么 （629+ 个👍） 文件上传 uppy The next open source file uploader for web browsers 🐶 github.com/transloadit… uppy 是一个体验顺滑、模块化的 JavaScript 文件上传器，可以无缝地与任何应用程序集成。它速度快，使用方便，可以让你专注比构建文件上传器更重要的问题。该库拥有以下特性： 支持 I18n 及可访问性； 轻量，基于模块化的插件架构，可按需加载； 通过开放的 tus 标准，可恢复文件上传，可以解决上传过程中网络故障的问题。 filepond 🌊 A flexible and fun JavaScript file upload library github.com/pqina/filep… filepond 是一个 JavaScript 库，可以上传你扔给它的任何内容，优化图像以加快上传速度，并提供出色的，可访问的，柔滑的用户体验。该库拥有以下特性： 接受目录，文件，Blobs，本地 URL，远程 URL 和 Data URIs； 图像优化，自动调整图像大小，支持裁剪，过滤和修复 EXIF 方向； 支持拖拽文件，从文件系统选择文件，复制和粘贴文件或使用 API 添加文件； 使用 AJAX 进行异步上传，支持分块上传，可以将文件编码为 base64 数据，并可以通过表单提交。 ✨ 扩展阅读 ✨ 玩转前端文件上传 大规格文件的上传优化 关注「全栈修仙之路」阅读阿宝哥原创的 3 本免费电子书（累计下载近2万）及 50 几篇 “重学TS” 教程。 图片处理 tui.image-editor 🍞🎨 Full-featured […]

一份不可多得的 TS 学习指南（1.8W字）

阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中，那时候 TypeScript 还没有进入大众的视野。然而现在学习 TypeScript 的小伙伴越来越多了，本文阿宝哥将从 16 个方面入手，带你一步步学习 TypeScript，感兴趣的小伙伴不要错过。 一、TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系： 1.1 TypeScript 与 JavaScript 的区别 TypeScript JavaScript JavaScript 的超集用于解决大型项目的代码复杂性 一种脚本语言，用于创建动态网页 可以在编译期间发现并纠正错误 作为一种解释型语言，只能在运行时发现错误 强类型，支持静态和动态类型 弱类型，没有静态类型选项 最终被编译成 JavaScript 代码，使浏览器可以理解 可以直接在浏览器中使用 支持模块、泛型和接口 不支持模块，泛型或接口 社区的支持仍在增长，而且还不是很大 大量的社区支持以及大量文档和解决问题的支持 1.2 获取 TypeScript 命令行的 TypeScript 编译器可以使用 npm 包管理器来安装。 1.安装 TypeScript

  2.验证 TypeScript

  3.编译 TypeScript 文件

  当然，对刚入门 TypeScript 的小伙伴来说，也可以不用安装 typescript，而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。通过配置 TS Config 的 Target，可以设置不同的编译目标，从而编译生成不同的目标代码。 […]

端到端的DevOps实践

商业创新——商业画布九宫格 * 客户细分 谁是你的用户？你的用户有什么特点？ * 价值主张 你可以为你的用户提供什么样的产品和服务？ * 渠道通路 你通过什么渠道与你的客户接触？ * 客户关系 你与你的客户将建立一种什么样的关系？ * 收入来源 这套商业模式可以有哪些收入来源？ * 核心资源 你已经具有或者需要掌握怎样的核心资源？ * 关键活动 你需要开展哪些核心活动？ * 重要伙伴 你需要有哪些重要的合作伙伴？ * 成本结构 这套商业模式在哪些地方花钱？成本结构是怎样的？ 商业创新——精益画布 * 问题 最需要解决的三个问题 * 解决方案 产品最重要的三个功能 * 关键指标 应该考核哪些东西 * 独特卖点 用一句话简明扼要但引人注目的话阐述为什么你的产品与众不同，值得购买 * 门槛优势 无法被对手轻易复制或者买去的竞争优势 * 渠道 如何找到客户 * 客户群体分类 目标客户 * 成本分析 争取客户所需花费 销售产品所需花费 网站架设费用 人力资源费用等 * 收入分析 盈利模式 客户终身价值 收入 毛利 产品设计 * 管理账户 * 浏览 * 购买 * 支付 * 配送 * 退货 敏捷开发 * Scrum 迭代式增量软件开发过程，通常用于敏捷软件开发。 持续交付 * 计划——编码——构建——测试——发布——部署——运营——监控—>下个循环 * 持续部署 蓝绿部署 灰度发布（金丝雀发布） 持续运营 * […]

jvm安装及配置

【安装】 1、下载安装包： 在官网下载https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2、上传到服务器/usr/lib目录下 3、解压：

  4、配置环境变量

  添加

  5、生效

  6、检查是否生效

出现版本号则已生效   【调优配置】 1、堆配置 -Xms 初始堆大小 -Xmx 最大堆大小 -Xmn 设置年轻代大小 -Xss 设置每个线程的堆栈大小 典型设置： -Xmx3550m      设置JVM最大可用内存为3550m； -Xms3550m      设置JVM初始内存为3550m，此值可以设置-Xmx相同，以避免每次垃圾回收完成以后JVM重新分配内存； -Xmn2g             设置年轻代大小为2G。整个堆大小=年轻代大小+年老代大小+持久代大小。持久代一般固定为64M,所以增大年轻代后，将会减少年老代大小，此值对系统性能影响比较大，Sun官方推荐配置为整个堆的3/8； -Xss128k           设置每个线程的堆栈大小。JDK5.0以后每个线程栈大小为1M，以前每个线程堆栈大小为256k。根据应用的线程所需要内存大小进行调整。在相同物理内存下，减少这个值能够生成更多的线程。但是操作系统对一个进程内的线程还是有限制的，不能无限生成，经验值在3000-5000左右。 为什么要区分新生代和老生代 堆中区分的新生代和老年代是为了垃圾回收，新生代中的对象存活期一般不长，而老年代中的对象存活期较长，所以当垃圾回收器回收内存时，新生代中垃圾回收效果较好，会回收大量的内存，而老年代中回收效果较差，内存回收不会太多。   2、设置年轻代大小 -XX:NewSize          年轻代初始值 -XX:MaxNewSize   年轻代最大值 -XX:NewRatio        年轻代（包括Eden和两个Survivor区）与年老代的比值（除去持久代） -XX:SurvivorRatio  年轻代中Eden区与Survivor区的大小比值   3、回收器的选择 -XX:+UseParallelGC   选择垃圾收集器为并行收集器。此配置仅对年轻代有效。即上述配置下，年轻代使用并行收集，而年老代仍旧使用串行收集。 -XX：PARALLELgcThreads    配置垃圾回收线程数，即：同时多少个线程一起进行垃圾回收。此值最好配置与处理器数目相同。 -XX:+UseParallelOldGC    配置年老代来及收集方式为并行收集，JDK6.0支持对年老代并行收集 -XX:MaxGCPauseMillis=100    设置每次年轻代垃圾回收的最长时间，如果无法满足此时间，JVM会自动调整年轻代大小，以满足此值 -XX:+UseAdaptiveSizePolicy   设置此选项以后，并行收集器会自动选择年轻代区大小和相应的Survivor区比例，以达到目标系统规定的最低响应时间或者收集频率等，此值建议使用并行收集器时，一直打开   【调优工具】 Jconsole,jProfile,VisualVM

Date.parse()

Date.parse() 方法解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数，如果该字符串无法识别，或者一些情况下，包含了不合法的日期数值（如：2015-02-31），则返回值为NaN。 不推荐在ES5之前使用Date.parse方法，因为字符串的解析完全取决于实现。直到至今，不同宿主在如何解析日期字符串上仍存在许多差异，因此最好还是手动解析日期字符串（在需要适应不同格式时库能起到很大帮助）。

  语法 显式调用：

  隐式调用：

  参数 dateString 一个符合 RFC2822 或 ISO 8601 日期格式的字符串（其他格式也许也支持，但结果可能与预期不符）。 返回值 一个表示从1970-1-1 00:00:00 UTC到给定日期字符串所表示时间的毫秒数的数值。如果参数不能解析为一个有效的日期，则返回NaN。 描述 parse 方法接受一个日期字符串（例如 "Dec 25, 1995"），并返回从1970-1-1 00:00:00 UTC到该日期字符串所表示日期的毫秒数。该方法在基于字符串值设置日期值时很有用，例如结合使用setTime() 方法和 Date() 构造函数。 parse 方法接受一个表示时间的字符串，返回相应的时间值。该方法可以接受符合 RFC2822 / IETF 日期语法 (RFC2822 Section 3.3) 的字符串，如 "Mon, 25 Dec 1995 13:30:00 GMT"。该方法能够理解美国大陆时区的缩写，但是为了更通用，应该使用时区偏移，如 "Mon, 25 Dec 1995 13:30:00 +0430" （格林威治的子午线向东偏移4小时30分钟）。如果没有指定时区，默认使用本地时区。 GMT 和 UTC 被看作相等。 如果 RFC2822 Section 3.3 格式中不包含时区信息时，会以本地时区来解析日期字符串。 由于在解析日期字符串时存在偏差会导致结果不一致，因此推荐始终手动解析日期字符串，特别是不同的ECMAScript实现会把诸如“2015-10-12 12:00:00”的字符串解析为NaN，UTC或者本地时间。 ECMAScript 5 ISO-8601 日期格式支持 另外，日期时间字符串也可以使用 ISO 8601 格式。例如，"2011-10-10" （仅日期）或 "2011-10-10T14:48:00" （日期和时间）能够作为参数被传递和解析。 如果参数字符串只包含日期格式，那么将会使用UTC时区来解析该参数。而如果是ISO 8601 格式中规定的时间加日期的格式，则将会被作为本地时区处理。 虽然在日期字符串解析过程中会使用时区修饰符，但返回值总会是从由NaN表示的1970-1-1 00:00:00 UTC到该日期字符串所表示日期的毫秒数。 由于 parse() 是 Date 的一个静态方法 , 所以应该使用 Date.parse() 来调用，而不是作为 Date 的实例方法。   默认时区的区别 当输入为 "March 7, 2014" 时， parse()  将默认使用本地时区。但如果使用 ISO  格式如 "2014-03-07" ，则会被默认为 […]

npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置

备注：<=> 意为等价于； 1、npm install <=> npm i --save   <=> -S --save-dev  <=> -D npm run start <=> npm start  // 对应"scripts"里的"start"命令 少敲几下键盘，何乐而不为 2、npm i --save-dev  <packname>   工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader… 3、npm i --save <packname>  项目（运行时、发布到生产环境时）依赖；例：antd , element,react… 4、对应关系如下（至于我们啥时候用--save、啥时候用--save-dev 感觉是个规范问题，用反了项目一样可以跑起来（对于安装依赖正确时），但会给其他看你项目的人带来误解、可能会导致一些bug的出现，还有一些配置的错乱等） 5、使用 npm i 安装package.json里的依赖时，两部分的包都会pull下来 5-1、使用 --prod、 npm i --prod <=> npm i --production  // 仅会拉取dependencies中的依赖 5-2、设置NODE_DEV=production时            // 效果同上，仅会拉取dependencies中的依赖 (注意等号两边没空格) 5-2-1、命令行设置（注意不同环境时的"分割符"） window => cmd ：set NODE_ENV=production && xxxx mac      => shell  : NODE_ENV=production 空格 xxxx 5-2-2、package.json=>script命令中设置 彩蛋：在新建package.json文件时，我们可以使用npm init -y 快速创建（yes 表示一路默认创建，还有 -f 表示 force）   from:https://blog.csdn.net/jwl_willon/article/details/81054978