vite sass

适用场景： img标签是通过v-for动态指定src路径的，本地可以正常显示，一旦打包之后就无法在线上显示了。 Bug原因： Vite打包只会处理静态src路径，动态src路径只会原样保留。 <!-- 静态src会被处理为正确地址 --> <img src="@/assets/xx.png" /> ......

项目代码同步至码云 weiz-vue3-template 基于 axios 封装请求，支持多域名请求地址 安装 npm i axios 封装 utils 目录下新建 request 文件夹，并新建 index.ts、request.ts 和 status.ts 文件。 1. status.ts 文件 ......

npm install node-sass 或者 npm rebuild node-sass 即可 ......

1、找不到模块“vite”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中 解决方法（tsconfig.json添加如下代码，添加之后重启；重启之后如果仍然有问题，可能是编辑器版本比较旧，升级编辑器版本，我从vscode v ......

解决方法：把ruoyi-ui下面的package.json里对应的这两项，改成如下图所示的版本，再次执行npm install && npm run dev就可以了 参考资料： https://blog.csdn.net/qq_40095911/article/details/119253908 ......

一、安装axios npm i axios 二、文件结构 涉及到的文件： utils/request.sj api/index.js（可以根据不同页面在api文件下新建不同文件夹，方便管理） vite.config.js 三、request.js 对axios进行简单的二次封装 import axi ......

getUrlByCode(code) { const path = `../../assets/images/device/${code}.png`; const modules = import.meta.glob("../../assets/images/device/*",{eager:tru ......

本质原因是因为浏览器不识别commonJS的语法，需要通过插件做转换 解决方法: 方法1:项目代码中使用了require语法，使用这个插件便可以转换 npm i vite-plugin-commonjs -S // vite.config.js import requireTransform fro ......

当前工程化的痛点 在浏览器支持ES Module之前，JavaScript并没有提供原生机制让开发者以模块化的方式进行开发。这也是打包工具诞生的原因：使用工具抓取，处理并将源码模块串联成可以在浏览器中运行的文件。 虽然现在有webpack，Rollup等工具，极大地改善了前端开发者的体验。但是当构建 ......

当你在使用 Vite 打包时，遇到类似于 `__vite-browser-external` 的错误消息，通常是因为在代码中尝试导入浏览器不支持的模块。 `__vite-browser-external` 是 Vite 内部的一个机制，用于替换浏览器环境中无法直接访问的 Node.js 核心模块。例 ......

介绍 在使用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 ......