vite
在Vite构建的项目中使用svg图标
安装插件 这里使用yarn来安装vite-plugin-svg-icons插件 yarn add vite-plugin-svg-icons 文件配置 在vite.config.ts中进行文件配置，首先是引入插件，其次是在plugins中添加配置 iconDirs中存放的就是图标文件地址数组，这里的 ......
【前端开发】vue3+vite项目部分优化
1、使用rollup-plugin-visualizer 可视化分析包 npm i rollup-plugin-visualizer -S 在vite.config.js中引入 在 plugins里面 然后执行npm run build就自动打开可视化分析 2 、 CDN加速 在vite.confi ......
vite学习笔记
深入浅出vite 1、前端构建工具的痛点 模块化方面，提供模块加载方案，并兼容不同的模块规范。 语法转译方面，配合 Sass、TSC、Babel 等前端工具链，完成高级语法的转译功能，同时对于静态资源也能进行处理，使之能作为一个模块正常加载。 产物质量方面，在生产环境中，配合 Terser等压缩工具 ......
vue3+vite import 引入ThreeBSP库 报错
我在网上查了一下 先用 npm 下载了三方包 npm i three-js-csg 再使用 const ThreeBSP = require('three-js-csg')(THREE) 的方法引入 出现了这个报错 查了是因为require 是webpack 里的 vite不支持 所以找不到 然后我 ......
vite.config.js base 与 vue-router base
vite.config.js base 决定了打包后，资源引用的前缀 base:'/hlw/' link ref='/hlw/assets' 打包后的dist要放到 /hlw 路径下 base 的值 与 process.env.BASE_URL、import.meta.env.BASE_URL一致 ......
npm init vite@latest vue3study --template vue
D:\Temp>npm init vite@latest vue3study --template vuenpm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! network request to https://registry.npmjs ......
尤雨溪：Vite的现状与未来展望
10 月 5 日 - 6 日，ViteConf 2023 在线举行，Vue 和 Vite 的创建者尤雨溪发表了题为《The State of Vite》 的演讲，他分享了 Vite 的现状与未来展望，本文就来看一看 Vite 现在怎么样了，以及未来的路将怎么走！ Vite 版本发布情况 首先，来快速 ......
Vite 自动导入
unplugin-auto-import 官网：https://github.com/unplugin/unplugin-auto-import 安装 pnpm add -D unplugin-auto-import 使用 // ~/vite.onfig.ts import AutoImport f ......
vue3+vite+ elementplus项目部署到gitee pages并发布
1.在gitee上新建仓库 命名：demo-vite-vue3 2.把新建的仓库克隆到本地 3.在本地的master分支编写代码并上传 把分支定位在master分支上 通过git工具把本地完成的代码上传到gitee的demo-vite-vue3仓库中去 git pull git add . git ......
使用vite创建vue3项目
vite是一种新型前端构建工具，能够显著提升前端开发体验，它主要由两部分组成； 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 ......
基于react18+vite4+arco.design搭建极简版后台管理模板
趁着国庆前夕整了一个vite4结合react18搭建后台管理模板，搭配上字节团队react组件库ArcoDesign，整体操作功能非常丝滑。目前功能支持多种模板布局、暗黑/亮色模式、国际化、权限验证、多级路由菜单、tabview标签栏快捷菜单、全屏控制等功能。极简非凡的布局界面、高定制化模块，用心打 ......
vite+vue3项目发布到手机
1.修改vite.config.js export default defineConfig({ plugins: [ vue(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, s ......
vite_vite.config.js配置代理与websocket代理
export default defineConfig({ server: { proxy: { "/proxy": { target: "http://121.10.140.87", // 线上服务器IP地址 changeOrigin: true, ws: true, rewrite: (path ......
vite中静态资源的处理
public目录 public 目录是存放静态资源的一种方式。 2.项目初始化时默认public作为静态资源服务的文件夹。我们可以在vite.config.js中修改publicDir。 3.该目录中的文件开发期间在 / 处提供，并在构建期间将public文件夹下的文件（不包含public本身）复制 ......
使用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 ......
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 ......
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 ......