![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工程化
文章平均质量分 73
夜跑者
目前从事web前端,小程序开发。熟悉vue框架,uni-app跨端框架。
展开
-
nginx设置代理解决跨域问题
在浏览器中输入 localhost:8193 打开前端网页,但出现了后端接口请求跨域问题。原因是localhost:8193 和发送的后端请求192.168.1.128:8185 IP 和 端口都不同,所以出现了跨域。这样打开前端网页的地址和请求后端接口的地址相同,浏览器就不会报跨域请求错误了。而接口通过nginx 又被转发到正确的后端接口地址,所以接口就能正常访问了。发送后端接口/file/get 会被转发到后端192.168.1.128:8151。原创 2024-07-09 17:36:45 · 308 阅读 · 0 评论 -
Qt 嵌入Vue项目 flapMap 浏览器兼容性问题
2)由于Qt不像浏览器那样可以console,或断点定位,所以采用加alert 的方法来定位,最后定位到调用flatMap方法的地方有问题。flapMap是es6语法,猜测是由于Qt自集成的chrome版本低导致,所以升级Qt版本到6, 问题解决。vue项目采用.browserslistrc默认配置,没有限定chrome浏览器版本,babel转换后生成的js代码需要的浏览器版本高于Qt自集成的chrome版本。使用 Browserslist,可以做到覆盖更广泛的受众(浏览器),同时包的体积也会保持最小化。原创 2023-08-16 14:02:17 · 929 阅读 · 0 评论 -
前端工程化基建探索(2)从内部机制和核心原理了解npm,看它何“咸鱼翻身”
本文从内部机制和核心原理了解npm,和简单了解了私服的建设,对 npm 一些常见使用误区以及使用技巧进行了分析,评论区也可以把你在安装删除的过程中遇到问题,一同分享和解决的办法~作者:codercao来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。转载 2023-01-29 11:15:52 · 240 阅读 · 0 评论 -
docker 启动Nginx镜像部署Vue项目
阐述了直接启动Nginx进程来部署vue项目,这篇文章阐述采用docker 启动Nginx镜像来部署vue项目。可以看到Nginx镜像已成功启动,在浏览器地址栏输入IP+port 出现Nginx欢迎页。再次在浏览器输入IP+端口号会出现vue部署的项目,记得清除一下缓存。记得把之前启动的镜像(Nginx欢迎页那个镜像)删除掉。3. 制作docker 本地镜像,并启动。3) 构建Nginx镜像,并启动。1. docker 启动Nginx镜像。可以看到Nginx镜像已经成功拉取。原创 2022-11-04 09:24:57 · 1367 阅读 · 0 评论 -
Vue项目自动化部署 CI/CD
上一篇文章写了手动通过xftp把vue项目包上传到Nginx web服务器目录下。都2022年了,谁还手动通过xftp部署。嗯,必须来个自动化部署。自动化部署是个比较熟悉的话题,也有成熟的方案,一般大点的公司采用gitLab + Jenkins,但这个方案对服务器性能要求比较高,一般是4核8G内存起步。我试用的阿里云ECS 服务器 是2核4G的,所以放弃尝试gitLab + Jenkins了。原创 2022-11-01 17:42:36 · 2042 阅读 · 0 评论 -
部署vue项目到阿里云服务器
可能在make的时候会报2个错误,在网上搜一下就解决了。大概记得第一个错误是在MakeFile中删除-Werror,第二个错误是注释一行代码就可以了。记得vue项目包dist 一定要上传到Nginx 安装目录下的html目录,一般是/usr/local/nginx/html目录。我们试用阿里云ESC服务器(选择CentOS),按步骤试用,稍等几分钟就会收到短信,创建实例成功。但不幸的是,打不开。4)用户名和密码填写我的在阿里云服务器设置的,一般用户名在没有修改的情况下都是root。原创 2022-10-27 18:06:27 · 5569 阅读 · 6 评论 -
写一个VSCode snippets 代码片段
在上篇文章中()这是两段通用网络接口代码,每个请求都这么写。我们能不能做个小工具方便的输入这些通用的代码片段呢?当然可以的。有经验的前端工程师基本上都安装了类似这样的VSCode插件。所以我们自定义的这个通用代码片段当然可以用VSCode插件来实现。为这2段代码片段写个VSCode插件有点杀鸡焉用牛刀的感觉。有没有更轻量的实现方案呢?VSCode 提供了snippets来实现。原创 2022-10-26 14:58:50 · 373 阅读 · 0 评论 -
运行npm install 命令的时候带上--ignore-scripts有什么好处吗?
现在可以就理解成是npm的一个包执行器,能让npm包中的命令行工具和其他可执行文件在使用上变得更加简单)。实际上呢,一些我们已经运行了几个月的脚本是没啥问题的,而该工具可以帮助我们确定新加入的依赖包是否可以加入到没问题列表中。就是说我们怎么样可以预先了解哪些依赖包需要脚本文件,我们不能使用。can-i-ignore-scripts工具,可以帮助我们分析各个依赖包是否可以使用。后缀,那么是可以减轻恶意代码的危害,但同时也会导致下载的依赖包没有正常发挥作用。或则就如我们标题里说的,在安装依赖包时,确保添加。转载 2022-10-14 14:51:29 · 1191 阅读 · 0 评论 -
Nginx代理服务器和真实后端服务器都配置了跨域导致的跨域问题
从报的错误看,应该是后端Nginx 和 真实服务器都设置了跨域导致的。第二天让后端把Nginx中的跨域配置去掉,在.env中加上域名配置,vue.config.js 中的devServer配置去掉保留都可以。前端用的Vue框架,后端给了一个host地址,写到了.env 文件中,http://xxx.xxx.xxx。但具体原因还是不太清楚,有知道的童鞋欢迎留言。这样设置后不报跨域错误了,请求成功。response headers中关于跨域的设置重复了。原创 2022-08-24 10:13:18 · 1316 阅读 · 0 评论 -
Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘
此vue项目用了.env .env.prod文件来配置开发环境和生成环境域名,在.env文件中配置了和vue.config.js中target相同的域名。这样axios在请求时,地址为http://xxx/api/user/info 导致vue.config.js配置的代理无效。这样axios请求时,地址为/api/user/info 这样vue.config.js配置的代理就生效了。vue项目在开发环境下出现了跨域问题,在vue.config.js中配置了跨域,但没有生效。原创 2022-10-10 14:43:18 · 424 阅读 · 0 评论 -
模仿dcloudio/uni-preset-vue 自定义基于uni-app的小程序框架
通过download-git-repo 库去下载远程模板,下载的模板放在一个临时文件夹中。局部安装vue-cli 然后在node-module/@vue/cli目录下添加log 即可。vue create -p dcloudio/uni-preset-vue my-project 这样使用。1. vue create -p dcloudio/uni-preset-vue my-project 流程。这个功能是通过vue-cli create 命令, -p 参数实现的,下面我们先分析一下整个流程。....原创 2022-08-26 17:56:38 · 3479 阅读 · 0 评论 -
微前端qiankun从搭建到部署的实践 (转载)
文章转自:微前端qiankun从搭建到部署的实践 (转载)_丢丢的大神的博客-CSDN博客建议看原文。最近负责的新项目用到了,写篇文章分享下实战中遇到的一些问题和思考。示例代码: github.com/fengxianqi/…。在线demo:qiankun.fengxianqi.com/单独访问在线子应用:项目有个功能需求是需要内嵌公司内部的一个现有工具,该工具是独立部署的且是用写的,而我们的项目主要技术选型是,因此需要考虑嵌入页面的方案。主要有两条路:两种方案都能满足我们的需求且是可行的。不得不说,方案虽转载 2022-06-23 15:10:35 · 1537 阅读 · 1 评论 -
如何编写一个WebPack的插件原理及实践
文章转自:如何编写一个WebPack的插件原理及实践 - 龙恩0707 - 博客园建议阅读原文。阅读目录回到顶部一:webpack插件的基本原理webpack构建工具大家应该不陌生了,那么下面我们来简单的了解下什么是webpack的插件。比如我现在写了一个插件叫 "kongzhi-plugin" 这个插件。那么这个插件在处理webpack编译过程中会处理一些特定的任务。比如我们现在在webpack.config.js 中引入了一个如下插件:// 引入打包html文件const HtmlWebpackPl转载 2022-06-10 11:05:42 · 937 阅读 · 0 评论 -
干货!撸一个webpack插件(内含tapable详解+webpack流程)
文章转自:干货!撸一个webpack插件(内含tapable详解+webpack流程) - 掘金Webpack可以将其理解是一种基于事件流的编程范例,一个插件合集。而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类。Tapable暴露出挂载的方法,使我们能 将plugin控制在webapack事件流上运行(如下图)。后面我们将看到核心的对象 、等都是继承于类。(如下图所示)tapable库暴露了很多Hook(钩子)类,为插件提供挂载的钩子。 2.使用 tap/ta转载 2022-06-02 17:46:20 · 528 阅读 · 0 评论 -
揭秘webpack插件工作流程和原理
文章转自:揭秘webpack插件工作流程和原理_全栈修炼的博客-CSDN博客通过插件我们可以扩展,在合适的时机通过提供的 API 改变输出结果,使可以执行更广泛的任务,拥有更强的构建能力。 本文将尝试探索 插件的工作流程,进而去揭秘它的工作原理。同时需要你对底层和构建流程的一些东西有一定的了解。想要了解 webpack 的插件的机制,需要弄明白以下几个知识点:一个简单的插件的构成构建流程是如何把各个插件串联到一起的以及对象的使用以及它们对应的事件钩子。是可以用自身原型方法来实例化的对象。只在安装插件被转载 2022-06-02 15:07:28 · 785 阅读 · 0 评论 -
npm run serve 运行过程
之前文章分析过vue-cli创建工程项目过程Vue-cli(3.0 + ) 源码分析(一)_夜跑者的博客-CSDN博客_vue-cli源码这篇文章看看我们经常运行的命令 npm run serve执行过程。1. 脚本从哪里来package.json中scripts字段定义脚本命令。scripts字段是一个对象,它的每一个属性,对应一段脚本。如下所示: "scripts": { "serve": "vue-cli-service serve ", "build": "vue原创 2022-05-30 09:17:31 · 3302 阅读 · 0 评论 -
前端CLI脚手架思路解析-从0到1搭建
文章转自:前端CLI脚手架思路解析-从0到1搭建_I'm 左撇峰子的博客-CSDN博客建议看原文。为什么要自己搞脚手架在实际的开发过程中,我们经常用别人开发的脚手架,以节约搭建项目的时间。但是,当npm没有自己中意的脚手架时,我们不得不自己动手,此时学会开发前端CLI脚手架的技能就显得非常重要。搭建一个符合大众化的脚手架能使自己在项目经验上加个分哦!什么时候需要脚手架其实很多时候从0开始搭建的项目都可以做成模板,而脚手架的主要核心功能就是利用模板来快速搭建一个完整的项目结构,后续我们只转载 2022-05-27 14:50:46 · 717 阅读 · 0 评论 -
Webpack之prefetch和preload
文章转自:Webpack之prefetch和preload_Meskjei的博客-CSDN博客_preload webpack文章目录引入例子引入所有新技术的出现都是为了解决现有的问题或者是旧技术没法解决的问题。prefetch和preload也是如此。现在有两个问题:首先,代码的懒加载固然能是首页加载的速度变快,可是相应的,待到用户与页面交互再加载交互相关代码会使得用户首次交互的体验不佳(长时间没有对操作进行响应)。其次,在SplitChunksPlugin的默认配置中,转载 2022-05-25 15:08:31 · 507 阅读 · 0 评论 -
Vue 文件解析、编译流程
文章转自:Vue 文件解析、编译流程 - 博客 - 编程圈本文将以目前(2020/10/26)最新的 vue-cli 版本 @vue/cli-service4.5.8(后文以 CLI4 代指)以脉络,详细分享 .vue 文件解析和编译的过程。解析指.vue文件被解析为template|script|style三份源码,编译指template源码被编译为渲染函数。写在前面的一些说明:本文并不涉及过多编译细节,主要目的是帮助大家熟悉编译流程,为解决问题提供编译方向上的思路。 本文使...转载 2022-04-13 08:56:45 · 5200 阅读 · 0 评论 -
温故而知新,浅析 Vue scoped 底层原理
文章转自:温故而知新,浅析 Vue scoped 底层原理 - 知乎前言通过这篇文章你将了解到:Vue scoped 是什么? Vue scoped 作用? Vue scoped 原理? 渲染的 HTML 标签上的 data-v-xxx 属性是如何生成的? CSS 代码中的添加的属性选择器是如何实现的?是什么?在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于转载 2022-04-12 09:37:57 · 577 阅读 · 0 评论 -
Vue-cli(3.0 + ) 源码分析(三)
上一篇文章分析了创建vue默认工程(Vue-cli(3.0 + ) 源码分析(二)_夜跑者的博客-CSDN博客)如果vue默认工程项目不符合我们的需求怎么办呢?vue-cli 提供了-p 选项,可以使用自己的预设模板,option('-p, --preset <presetName>', 'Skip prompts and use saved or remote preset')这一篇文章我们就分析一下uni-app 提供的预设模板怎么做的。uni-app 可以用vue-cli方式创建项原创 2022-04-10 15:49:59 · 1105 阅读 · 0 评论 -
前端搭建自己的脚手架(cli),实现公司内部前端工程化
文章转自:前端搭建自己的脚手架(cli),实现公司内部前端工程化_「已注销」的博客-CSDN博客_前端cli搭建我们熟知的vue-cli,create-react-app都是前端圈最知名、最流行、最大众化的脚手架工具,但是我们公司内部开发时一般会对其再封装一些自己的库或者组件等,生成自己的脚手架工具,但大多搭建脚手架的文章都比较复杂,很多时候我们想要就是通过简单的命令能够比较方便的下载到我们的脚手架代码。一、生成脚手架代码模板,并放到github在这里我封装了两个脚手架代码模板:转载 2022-04-07 08:42:38 · 1310 阅读 · 0 评论 -
【无标题】ejs 模板引擎的使用
文章转自:EJS[0]-如何使用EJS - 云+社区 - 腾讯云EJS[0]-如何使用EJS 最近做的一个新项目,所以想着换一个新的模版引擎尝试一下。(之前我们一直在使用handlebars)...https://cloud.tencent.com/developer/article/1093681?from=15425EJS[0]-如何使用EJS最近做的一个新项目,所以想着换一个新的模版引擎尝试一下。(之前我们一直在使用handlebars) 本次源码分析所使用的是TJ大神开发的1.x版本 当然转载 2022-04-02 09:10:30 · 273 阅读 · 0 评论 -
Vue-cli(3.0 + ) 源码分析(二)
上一篇文章(Vue-cli(3.0 + ) 源码分析(一)_夜跑者的博客-CSDN博客)分析了vue create my-project 命令执行过程中创建preset,往preset注入@vue/cli-service 插件,写入package.json,初始化git,npm install 依赖等过程。这篇文章继续往下分析核心部分:generate过程。在分析generate过程之前,我们看看不做generate创建的工程项目是什么样的:只是安装了cli-plugin-babel、cli..原创 2022-03-26 12:30:00 · 1140 阅读 · 0 评论 -
Vue-cli(3.0 + ) 源码分析(一)
下载了Vue-cli源码后没有找到单步调试或添加log的方法,就采用了一个笨方法:局部安装vue-cli,然后在node-modules/@vue/cli 目录下的源代码添加log 就可以了。npm install @vue/cli //局部安装 安装后的目录如下:接下来我们分析一下源码。1. 首先看下package.json版本是5.0.3,最新的版本,description描述:Command line interface for rapid Vue.js development原创 2022-03-22 08:54:20 · 2101 阅读 · 0 评论