草庐IT

Vite 配置代理 Proxy,解决跨域

我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端API的URL路径时,只要域名、端口或访问协议(如HTTP和HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名,例如 https://example.com/api/some_end_point,https://example.com/api/other_end_point,针对这两种情况,可以直接用同一个配置来解决,即代理配置。​不管是Vite还是Webpack,这些打包工具都支持设置前端代理,它们能够把对某一段URL的访问直接转换成另一个真实的后端API地址,这样前后端就视为使用了相同的域名、协议

【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

使用vite-plugin-svg-icons插件显示本地svg图标1.安装vite-plugin-svg-icons插件npmifast-glob@3.x-Dnpmivite-plugin-svg-icons@2.x-D2.使用vite-plugin-svg-icons插件2.1在项目根目录查找vite.config.js,进行配置import{createSvgIconsPlugin}from'vite-plugin-svg-icons';constpath=require('path');functionresolve(dir){returnpath.join(__dirname,dir

前端环境变量及vite中本地环境配置实践

前言前端在之前并没有工程化的概念,甚至开发环境、测试环境、生产环境全靠大家手动配置。有了nodejs之后,环境变量 (environmentvariables)这个概念,便慢慢进入了前端的视野,方便了前端各种环境自动化配置及本地环境的运行。现如今 webpack  、 rollup、vite 等打包工具大行其道,我们不得不将它重视起来。在现代前端开发的整个链路中, 环境变量起到一个项目的配置枢纽作用,也是前端提效的重要一环。今天,我们就一步一步剖析环境变量在前端的使用场景及环境变量是如何在前端环境中发挥作用的。1、cross-env配置环境变量,"build":"cross-envNODE_E

【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建Vue+Vite完成律师H5页面还原

前言云上代码开发编程的概念在2000年就已经被提出,在2010年就已经诞生了Cloud9IDE这样比较成熟的产品。直到现在,云IDE的成熟产品已经很常见了,除了亚马逊基于其云计算的的Cloud9,老牌的云IDEEclipseTheia,以及前不久刚刚宣布开源的Coder。国内的厂商的云IDE产品也有很多,比如腾讯的CloudStudio。代码开发随着云计算技术的不断发展,无服务器计算应运而生。无服务器计算由云平台统一管理后端服务及资源,避免了开发过程中繁琐的集群搭建及系统运维工作,在提高整体资源利用率的同时,借助云IDE还能够帮助开发者聚焦业务逻辑,简化应用开发难度,提升软件研发效率。这也是云

Vue3 Vite electron 开发桌面程序

Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium内核提供了现代浏览器的功能,例如HTML5和CSS3支持,JavaScript引擎等,而Node.js运行时环境则提供了服务器端JavaScript的能力和模块系统,这使得开发人员可以使用Node.js的模块和工具来构建桌面应用程序。Electron案例VisualStudioCode:由

Vite 完整版详解

目录序论:vite架子分析1、打包构建:2、环境变量3、模式4、兼容老浏览器  5、typescript相关6、基本配置核心配置全集推荐两个插件插件Volar、 Vue3Snippets序论:开发环境:ESM+HMR:来实现模块的热更新;类似于webpack-server生产环境:Rollup:打包工具rollup的产生就是针对开发js库的,生成代码只是把我们的代码转码成目标js并无其他Vite 的快,主要体现在两个方面:快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现,完全归功于 Vite 借助了浏览器对 ESM 规范的支持,采取了与 Webpack 完全不同的 unbun

Vite 完整版详解

目录序论:vite架子分析1、打包构建:2、环境变量3、模式4、兼容老浏览器  5、typescript相关6、基本配置核心配置全集推荐两个插件插件Volar、 Vue3Snippets序论:开发环境:ESM+HMR:来实现模块的热更新;类似于webpack-server生产环境:Rollup:打包工具rollup的产生就是针对开发js库的,生成代码只是把我们的代码转码成目标js并无其他Vite 的快,主要体现在两个方面:快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现,完全归功于 Vite 借助了浏览器对 ESM 规范的支持,采取了与 Webpack 完全不同的 unbun

Vue3的vite中图片的动态加载

第一种方式(适用于处理单个链接的资源文件)importhomeIconfrom'@/assets/images/home/home_icon.png'img:src="homeIcon"/>第二种方式-----图片在src目录下vite官网的静态资源引入参考地址newURL()+import.meta.urlconstgetAssetsFile=(url)=>{returnnewURL(`../assets/images/${url}`,import.meta.url).href}注意:这里只能通过…/…/这种方式去获取路径,无法通过@/assets第三种方式----图片在public目录下/

vue3使用Vite打包报Rollup failed to resolve import “xxx/node_modules/ant-design-vue/xxxx

在使用vue3+vite+antdesignvue的时候,引入一些antd的一些组件的时候,通常运行是没有错的,但是打包会报错,例如:Rollupfailedtoresolveimport"D:/xxxxx/node_modules/ant-design-vue/es/form-item-rest/style/index"from"src/views/xxx/xxx.vue".15:01:51Thisismostlikelyunintendedbecauseitcanbreakyourapplicationatruntime.Ifyoudowanttoexternalizethismodule

vite.config.js 关闭eslint

水平不高,能力有限,eslint报错实在是烦,只能关闭eslint,删去下面两行代码即可