vite

介绍 在使用nest创建项目时,默认使用webpack进行打包,有时候启动项目需要1-2分钟。所以希望采用vite进行快速启动项目进行开发。 本文主要使用NestJs、Vite和swc进行配置。文章实操较多，概念性的东西可访问对应的官方文档进行了解。tips: 个人认为概念性的东西,在文章中指出。对 ......

1.在 vite.config.js 引用 import {resolve} from 'path' 2.添加标黄的 export default defineConfig({ resolve:{ alias:{ "@":resolve(__dirname,"./src") } } }) 3.有图看 ......

const files = import.meta.glob('./*.js',{eager:true}) //会得到一个对象 注意引入路径里绝对不能带有变量，会报错 //{eager:true}是定义是否同步引入的参数，去掉会得到几个异步函数，根据自己的需求写就行了 console.log(fil ......

在electron-vite创建项目的时候，src目录下会建立三个目录 第一个是主进程文件，第二个是预渲染进程文件，第三个是渲染进程文件 对于preload，默认的是导出下面的index.ts到out/preload下面，但是如果我们想导出多个preload，应该怎么设置？ 在electron.vi ......

首先需要安装vite-plugin-html插件 在vite.config.ts文件中增加如下代码： plugins: [ createHtmlPlugin({ minify: true, pages: [ { template: 'index.html', filename: 'index.htm ......

本文将介绍如何将前端web应用程序从 Webpack 升级到 Vite。 Vite 是最新的前端开发工具，其受欢迎程度和采用率都在大幅增长。可以查看下图中来自 npm trends 的下载。 推动这一趋势的是 Vite 核心的一个关键概念：开发人员体验。与 Webpack 相比，Vite 在开发过程 ......

本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题，没有技术深度，但全都是解决实际问题的干货，可以当作是问题手册以备后用。本人日常工作偏后端开发，因此，文中的一些前端术语描述可能不严谨，敬请谅解。重点是：这里记录的解决方案都是行之有效果的，拿来即可 ......

本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题，没有技术深度，但全都是解决实际问题的干货，可以当作是问题手册以备后用。本人日常工作偏后端开发，因此，文中的一些前端术语描述可能不严谨，敬请谅解。重点是：这里记录的解决方案都是行之有效果的，拿来即可 ......

项目代码同步至码云 weiz-vue3-template pina 是 vue3 官方推荐的状态管理库，由 Vue 核心团队维护，旨在替代 vuex。pina 的更多介绍，可从 pina官网 查看 特点 更简洁直接的 API，提供组合式风格的 API 支持模块热更新和服务端渲染 对TS支持更为友好 ......

前言 先说一下写这个系列文章的念头哈，起因应该是之前在那块听过一次课，里面讲的编写一个vite插件，使用marked将转换md文件转换成js代码然后在Vue组件中使用的一个案例（用md来生成组件库文档）。 代码大概是这样子的。当时的vite版本使用的是2.5.3。 import path from ......

问题： vite报错:UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??=' 今天clone一个vite的项目，安装依赖后运行npm run dev报错： UnhandledPromiseRejectionWarni ......

项目中的问题 1. 当我们在维护自己的博客或者自己的网站的时候没有特别好的服务器就会响应特别的慢 2. 当我们项目特别大的时候也会首屏加载特别慢而且 vue项目打包后的js文件特别的庞大 还要加载各种资源就会特别的卡顿 3.当我们项目中用到了一些3D效果各种3D资源部特别的大的时候根本加载不出来 解 ......

vite 子项目 热部署 通过nginx，和父项目端口号不同，导致热更新的websocket报错的解决方案 我的父项目端口号是8888 子项目端口号是 8013 这里报错的原因就是，热更新的websocket在8013的服务上，但是页面访问的是8888端口的websocket 所以自然会爆红 ......

vite ts 安装 js-cookie 库，vscode找不到类型说明（有波浪线），解决方案 先安装库 https://www.npmjs.com/package/js-cookie 再安装类型 https://www.npmjs.com/package/@types/js-cookie 问题 然 ......

前端项目性能优化和开发体验优化是无法避免的一个话题，在之前使用 webpack 做应用构建的时候，有许多手段和插件来做优化。当使用 vite 构建应用时也有许多插件来做优化，本文对 vite 的优化插件或方法做下汇总。 一、打包性能优化 1. html 处理 vite-plugin-html vit ......

什么是unocss？ unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 Unocss： Guide 用Vite安装和配置步骤：UnoCSS Vite Plugin 互动性文档：https://unocss.dev/interactive/（ ......

项目代码同步至码云 weiz-vue3-template Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。 1. 安装 npm i vue-router@4 2. 集成 1. 新建两页面进行示例 在src/view下 ......

原因是在引入Element-Plus的顺序在vue之前导致，重新调整下他们的顺序后，问题解决。 import App from './App.vue' import { setupI18n } from '/@/i18n' import { setupRouter } from '/@/router ......

前言 在使用 vue3 + vite 实际开发过程中的一些经验分享，涵盖 vite 构建优化配置项的实践，以及打包配置性能优化的实践 plugin 项目优化汇总 @vitejs/plugin-vue vite 支持 vue 开发 按需引入组件库 unplugin-vue-components unp ......

<script setup> import MapTimeLegend from "./components/MapTimeLegend" </script> [plugin:vite:import-analysis] Failed to resolve import "./components/M ......

项目代码同步至码云 weiz-vue3-template 要求代码规范，主要是为了提高多人协同和代码维护效率，结合到此项目，具体工作就是为项目配置 eslint 和 prettier。 editorconfig 安装 EditorConfig for VS Code 插件，根目录下新建 .edito ......

遇到问题： 1. TypeError: Unknown file extension ".scss" for D:\workspace\ai_plat_front\node_modules\element-plus\theme-chalk\src\base.scss Serialized Error ......

//先下包 npm i postcss-px-to-viewportimport pxtovw from 'postcss-px-to-viewport' //配置参数 移动端适配 const usePxtovw = pxtovw({ viewportWidth: 375, viewportUnit ......

//npm i @types/node 先下包解决无法找到到类型声明文件的错误 //在vite.config.ts引入 import resolve from 'path' export default defineConfig({ resolve: { alias: { '@': resolve( ......

推荐 concurrently 点击查看代码 "dev": "concurrently \"nodemon --exec electron . \" \"vite\"", 成熟的脚手架 日常开发可以使用 electron-vite (opens new window)或 electron-vite- ......

要创建一个使用TypeScript语法的公共方法库项目，可以按照以下步骤使用Vite构建工具来设置项目： 安装Vite全局工具（如果已安装，请跳过此步骤）： npm install -g create-vite ``` 创建新项目： create-vite my-library --template ......

vite 代理的项目，一般看不到代理的目标地址 如图： 如果要查看代理的目标地址，本文提供两种方式 1，configure配置 如图，通过configure，我们可以拿到proxy代理实例，通过注册on事件，可以在回调函数里面拿到目标地址和请求的路径，从而设置header 2， bypass配置 其 ......

Rollup 4 Vite 现在使用 Rollup 4，它也带来了一些重大的变化，特别是： 导入断言（assertions 属性）已被重命名为导入属性（attributes 属性）。 不再支持 Acorn 插件。 对于 Vite 插件，this.resolve 的 skipSelf 选项现在默认为 ......

proxy: { "/dev-api": { target: "http://172.18.247.123:9000", rewrite: (path) => path.replace(/^/dev-api/, ''), configure: (proxy, _options) => { proxy ......

前言 最近使用 vite 在写项目时，遇到vue3中给setup添加name的问题，本来是打算直接使用插件进行实现的，但是评论说是会有各种各样的问题，看了下vite插件介绍后，下面来讲解 Vite 插件的基本概念。 Vite 和 Rollup 有了解过 Vite 的都知道，Vite 开发用的 ESB ......