BlogMind

vue项目本地开发完成后部署到服务器后报404是什么原因呢？ 一、如何部署前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可 我们知道vue项目在构建后，是生成一系列的静态文件 常规布署我们只需要将这个目录上传至目标服务器即可 12// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径scp dist.zip user@host:/xx/xx/xx 让web容器跑起来，以nginx为例 12345678server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; }} 配置完成记得重启nginx 12345// 检查配置是否正确nginx -t // 平滑重启nginx -s reload 操作完后就可以在浏览器输入域名进行访问了 当然上面只是提到最简单也是最直接的一种布署方式 什么自动化，镜像，容器，流 ...

一、是什么2017年，微信正式推出了小程序，允许外部开发者在微信内部运行自己的代码，开展业务 截至目前，小程序已经成为国内前端的一个重要业务，跟 Web 和手机 App 有着同等的重要性 小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用 也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载 注意的是，除了微信小程序，还有百度小程序、微信小程序、支付宝小程序、抖音小程序，都是每个平台自己开发的，都是有针对性平台的应用程序 二、背景⼩程序并⾮凭空冒出来的⼀个概念，当微信中的 WebView 逐渐成为移动 Web的⼀个重要⼊⼝时，微信就有相关的 JS-SDK JS-SDK 解决了移动⽹⻚能⼒不⾜的问题，通过暴露微信的接⼝使得 Web 开发者能够拥有更多的能⼒，然⽽在更多的能⼒之外，JS-SDK的模式并没有解决使⽤移动⽹⻚遇到的体验不良的问题 因此需要设计⼀个⽐较好的系统，使得所有开发者在微信中都能获得⽐较好的体验： 快速的加载 更强⼤的能⼒ 原⽣的体验 易⽤且安全的微信数 ...

一、运行流程webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好 从启动到结束会依次执行以下三大步骤： 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统 初始化流程从配置文件和 Shell 语句中读取与合并参数，得出最终的参数 配置文件默认下为webpack.config.js，也或者通过命令的形式指定配置文件，主要作用是用于激活webpack的加载项和插件 关于文件配置内容分析，如下注释： 12345678910111213141516171819202122232425262 ...

一、背景随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关，当我们本地开发启动 devServer 或者 build 的时候，如果时间过长，会大大降低我们的工作效率 所以，优化webpack 构建速度是十分重要的环节 二、如何优化常见的提升构建速度的手段有如下： 优化 loader 配置 合理使用 resolve.extensions 优化 resolve.modules 优化 resolve.alias 使用 DLLPlugin 插件 使用 cache-loader terser 启动多线程 合理使用 sourceMap 优化loader配置在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader 如采用 ES6 的项目为例，在配置 babel-loader 时，可以这样： 1234567891011121314module.exports = { module: { ...

一、是什么HMR 全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用 例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失 如果使用的是 HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用 在webpack中配置开启热模块也非常的简单，如下代码： 123456789const webpack = require('webpack')module.exports = { // ... devServer: { // 开启 HMR 特性 hot: true // hotOnly: true }} 通过上述这种配置，如果我们修改并保存css文件，确实能够以不刷新的形式更新到页面中 但是，当我们修改并保存js文件之后，页面依旧自动刷新了，这里并没有触发热模块 所以，HMR 并不像 Webpack 的其他特性一样可以开箱即用，需要有一些额外的操 ...

一、作用域作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合 换句话说，作用域决定了代码区块中变量和其他资源的可见性 举个例子 12345function myFunction() { let inVariable = "函数内部变量";}myFunction();//要先执行这个函数，否则根本不知道里面是啥console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined 上述例子中，函数myFunction内部创建一个inVariable变量，当我们在全局访问这个变量的时候，系统会报错 这就说明我们在全局是无法获取到（闭包除外）函数内部的变量 我们一般将作用域分成： 全局作用域 函数作用域 块级作用域 全局作用域任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问 1234567// 全局变量var greeting = 'Hello World!& ...

一、是什么正则表达式是一种用来匹配字符串的强有力的武器 它的设计思想是用一种描述性的语言定义一个规则，凡是符合规则的字符串，我们就认为它”匹配”了，否则，该字符串就是不合法的 在 JavaScript中，正则表达式也是对象，构建正则表达式有两种方式： 字面量创建，其由包含在斜杠之间的模式组成 1const re = /\d+/g; 调用RegExp对象的构造函数 1234const re = new RegExp("\\d+","g");const rul = "\\d+"const re1 = new RegExp(rul,"g"); 使用构建函数创建，第一个参数可以是一个变量，遇到特殊字符\需要使用\\进行转义 二、匹配规则常见的校验规则如下： 规则 描述 \ 转义 ^ 匹配输入的开始 $ 匹配输入的结束 * 匹配前一个表达式 0 次或多次 + 匹配前面一个表达式 1 次或者多次。等价于 {1,} ? 匹配前面一个表达式 0 次或者 1 ...

一、用途可视区域即我们浏览网页的设备肉眼可见的区域，如下图 在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载 列表的无限滚动 计算广告元素的曝光情况 可点击链接的预加载 二、实现方式判断一个元素是否在可视区域，我们常用的有三种办法： offsetTop、scrollTop getBoundingClientRect Intersection Observer offsetTop、scrollTopoffsetTop，元素的上外边框至包含元素的上内边框之间的像素距离，其他offset属性如下图所示： 下面再来了解下clientWidth、clientHeight： clientWidth：元素内容区宽度加上左右内边距宽度，即clientWidth = content + padding clientHeight：元素内容区高度加上上下内边距高度，即clientHeight = content + padding 这里可以看到client元素都不包括外边距 最后 ...

一、typeoftypeof 操作符返回一个字符串，表示未经计算的操作数的类型 使用方法如下： 12typeof operandtypeof(operand) operand表示对象或原始值的表达式，其类型将被返回 举个例子 12345678910typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof null // 'object'typeof [] // 'object'typeof {} // 'object'typeof console // 'object'typeof console.log // 'function' 从上面例 ...

一、概述前面我们讲到，JS 中有六种简单数据类型：undefined、null、boolean、string、number、symbol，以及引用类型：object 但是我们在声明的时候只有一种数据类型，只有到运行期间才会确定当前类型 1let x = y ? 1 : a; 上面代码中，x的值在编译阶段是无法获取的，只有等到程序运行时才能知道 虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的，如果运算子的类型与预期不符合，就会触发类型转换机制 常见的类型转换有： 强制转换（显示转换） 自动转换（隐式转换） 二、显示转换显示转换，即我们很清楚可以看到这里发生了类型的转变，常见的方法有： Number() parseInt() String() Boolean() Number()将任意类型的值转化为数值 先给出类型转换规则： 实践一下： 12345678910111213141516171819202122232425Number(324) // 324// 字符串：如果可以被解析为数值，则转换为相应的数值Number('324') ...