vite-plugin-federation vite联邦federation
使用vite插件进行低代码平台自定义开发（手机版自定义范例）
前言 Youtube上的前端网红「Theo」在React文档仓库发起了一个Pull request，号召React文档不要再默认推荐CRA(create react app)，而是应该将Vite作为构建应用的首选。 vite的影响力已经从vue蔓延到了react，可见在前端工程化开发中，它已经越来越 ......
关于vite/cli构建项目的区别&环境变量配置&关于接口地址
#### 区别**Vite:** 1. **开发服务器启动速度：** Vite 通过利用 ES 模块的特性，实现了快速的冷启动和热模块替换。这意味着在开发环境中，启动开发服务器和应用程序的重新加载速度更快。1. **即时的按需编译：** Vite 在开发过程中只会编译和打包当前正在编辑的文件，而不会 ......
Vue3-vite 按需引入Element-plus
1.下载unplugin-vue-components，unplugin-auto-import 包 npm i -D unplugin-vue-components unplugin-auto-import 2.vite.config.js 文件中配置 1 import AutoImport fr ......
解决vite不是内部或外部命令，也不是可运行的程序 或批处理文件
要vite创建vue3.0项目的时候，到了最后一步npm run dev的时候出现了以下错误： ‘vite’ 不是内部或外部命令，也不是可运行的程序或批处理文件。 问题的原因是：缺少安装依赖这一步！ vite不像node或cli，会自动帮助我们执行npm i (install)命令去下载相关依赖，需 ......
如何在vite+vue3中的html页面中使用变量？
如何在vite+vue3中的html页面中使用变量？ vite版本：4.1.5 vue版本：3.2.47 需要引入新的开发依赖: yarn add vite-plugin-html -D 修改vite.config.ts文件配置 ... // @ts-ignore import { createHt ......
【FATE联邦学习】AnsibleFATE离线部署出现AnsibleUndefinedVariable: ‘ansible_ssh_host‘ is undefined.
本人已经提issuehttps://github.com/FederatedAI/FATE/issues/5059. 根据群友 钟紫英 的方法， 修改project_path/enviroments/prod/hosts中的[fate]组： render后原文： # 前面省略 ansible_bec ......
Vite+ts+springboot项目集成2
项目集成 集成element-plus 官网地址: 安装图标库 pnpm install element-plus @element-plus/icons-vue 入口文件main.ts全局安装element-plus,element-plus默认支持语言英语设置为中文 import Element ......
vite 自定义打包输出至指定文件夹
1.vite打包情况介绍： 1.1vite在不进行任何配置的情况下，会将除开public的所有引用到资源打包编译添加哈希值至assets文件夹中（非引用文件以及行内样式图片未被打包编译资源会被treeSharp直接忽略不打包）， 1.2webpack与vite打包区别： 1.2.1vite会将所有J ......
Prometheus（三）——基于prometheus联邦收集node的指标数据
第十二周-Prometheus（三） 一、实现基于prometheus联邦收集node的指标数据 1.1 部署prometheusprometheus server、联邦节点方法相同 下载 mkdir /apps cd /apps wget https://github.com/prometheus ......
VUE3+vite+arco design 项目初始化
意见反馈系统总结 创建项目 首先选择一个文件夹 进入命令窗口 使用vite创建项目 npm create vite@latest 初始化项目后 进入项目安装依赖 npm install 运行 npm run dev 使用arcodesign组件库 安装 npm install --save-dev ......
vite启动项目配置地址为局域网地址
1.本地地址： 127.0.0.1 是本机回环测试地址， 发送的数据不经过网卡，对应着localhost地址，该地址同局域网的其他电脑无法访问到。2.局域网地址： 192.168.1.1 是路由器分配给你的地址。比如大家平常在宿舍几个人用路由器上网的情况，同局域网内的其他电脑能够访问得到该地址。 3 ......
vite配置@以及 cors: true跨域
vite.config.js里 server: { port: 8080, //默认启动时的端口号 open: true, //自动打开默认浏览器 cors: true, //允许跨域 }, resolve: { alias: { '@': pathResolve('./src') // 设置 `@ ......
首次加载vue+vite项目报错
报错了： failed to load config from D: ***** vite.config.jserror when starting dev server:Error: Cannot find module 'vite'Require stack:- D: ***** vite.co ......
vite打包上线后，部分图片无法显示
1.情况：使用vite打包后，上线时部分图片展示不了。 1.1使用css引用的图片能够正常展示，能够打包进dist文件中assets中，查看浏览器中引用路径为assets中的图片，如此引用的图片不需经过特别处理，不管是放在static或者public的文件夹中都可以，都能够自动打包进dist中的as ......
Vue3+vite路由配置优化(自动化导入)
今天在维护优化公司中台项目时，发现路由的文件配置非常多非常乱，只要只中大型项目，都会进入很多的路由页面，规范一点的公司还会吧路由进行模块化导入，但是依然存在很多文件夹的和手动导入的问题。 于是我想到了我之前使用vuex时进行的模块化自动导入js文件，能不能使用到自动导入.vue文件中去，答案是可以！ ......
[vite] Internal server error: URI malformed at decodeURI (<anonymous>) at viteTransformMiddleware (xxx_project/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:59976:19)的解决方法
前端项目启动，出现 [vite] Internal server error: URI malformed at decodeURI () at viteTransformMiddleware (xxx_project/node_modules/vite/dist/node/chunks/dep-5 ......
vite.config.ts关于build后少一层目录的问题
问题：新项目生产环境发布后，一直少一层路径，如下图 因为不太熟悉vite.config,ts的配置，各种查询后，发现网上都是说加一个root:'./'根目录，各种试错，最终发现问题不是root 答案：是加base:"./"，成功了如下图 记录一下，避坑，希望帮助有需要的朋友 ......
vite配置跨域（记录）
根目录找到vite.config.js或者自建vite.config.js，代码如下： import { defineConfig } from 'vite' export default defineConfig({ server: { proxy: { '/api': { target: 'ht ......
vite 打包报错 SyntaxError: Unexpected token '??='
'??' Nullish coalescing Operator 是ECMAScript 2019年的已被采纳的提案，需要 Node.js 15以上才支持。 因此需要升级本地的 Node.js 版本，推荐使用nvm管理本地 Node.js 版本。 参考资料 1、ECMAScript已经完成的提案 2 ......
如何使用Vite创建Vue3的uniapp项目
项目结构 my-vue3-project ├─ .env //默认环境变量 ├─ .env.development //开发环境变量 ├─ .eslintrc-auto-import.json //（autoimport变量，eslint配置）由auto-import插件生成 ├─ .eslintr ......
vite px 自动转rem
vite px 自动转rem 1、插件安装 npm i @types/postcss-pxtorem npm i amfe-flexible npm i postcss-pxtorem 2、main.ts引入 import "amfe-flexible"; 3、去掉报错问题 shim.d.ts 添加 ......
在vite环境中动态导入静态资源
背景 现在有一个场景，有很多的选项卡，点击不同选项卡实现图片的切换。 当我们动态的切换图片url时，会发现图片找不到，报404. 原因 在vite项目中，运行的时候，其实是打包后的代码，所以，图片需要的是打包后的图片路径。 vite在一些情况下会自动转喊路径 css中的静态路径 img中的src（静 ......
vite + vue3 自动导入点击路由刷新问题记录
export default defineConfig(() => { // 这里只加入了element的有其他的也加在这里 const optimizeDepsElementPlusIncludes = ['element-plus/es']; // 预加载element样式 有其他组件也是如此设 ......
使用vite创建vue程序，同时引入element-plus
步骤如下： 一、安装vite npm install -g create-vite 二、创建vue程序，不需要先创建好空的文件夹，直接执行下面的代码即可 create-vite test --template vue 三、使用npm引入element-plus npm install element ......
Vite - 配置多页面应用
# 多页面需求 所谓多页面是一个项目下面有多个子项目，其每一个项目都有自己的 index.html 和 main.ts。下图是多页面应用目录结构的一个例子：  打开`Vue.js`官网:https:/ ......
vue3使用postcss-px-to-viewport 附带vite配置
postcss-px-to-viewport做前端自适应，适用于pc和移动1.下载 postcss-px-to-viewport 插件 npm i postcss-px-to-viewport 2.在vite.config.ts中添加配置 import pxtovw from 'postcss-px ......
vue3+vite使用require引用图片失效问题
首先，这个问题的原因跟vue无关，是vite引用只支持import，require是隔壁webpack的引用方式， vite用自身的url可以用import.meta.url来拼装项目路径，如下： 这个原理只不过是在发布的地址上去找对应图片，而且只会找项目中public文件夹下的图片资源，asset ......