前台后台-vite打包配置

已于 2023-04-14 11:33:28 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： key门户项目 文章标签： vue.js npm node.js
于 2023-03-31 22:59:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hktkkkk/article/details/129889914
版权
该博客详细介绍了Vite项目的打包配置，包括打包体积可视化、按需自动导入Vue文件和Element Plus组件，SVG雪碧图生成，keep-alive的使用，图片压缩，CDN配置，以及移动端px转vw的设置，旨在提升前端应用的性能和用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.打包体积可视化面板

npm install --save-dev rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
	plugins: [
		visualizer({
				open: true, //注意这里要设置为true，否则无效
				emitFile: false, //true则打包后的分析文件会出现在打包好的文件包下，否则就会在项目目录下
				gzipSize: true,//搜集gzip压缩包的大小到图表
			}),
	]
})

2.按需自动导入

npm i unplugin-auto-import -D

 2.1 按需导入vue文件的内容

.vue文件无需再手动导入

	// imp
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vite打包配置基础
Yiu的博客
03-21 1578
Vite（法语意为“快速”）是由 Vue.js 之父尤雨溪开发的一款现代化的前端构建工具，其设计目标是通过提供更快的冷启动速度、更高效的热更新和智能的按需编译打包机制，极大地提升前端开发体验。本文将详细介绍如何利用 Vite 对项目进行优化打包。
vue-cli3打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）
qq_37021104的博客
12-20 1万+
前言: 刚开始以为打包上线挺简单的，不就是 cnpm run build打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题，首先就是页面空白的问题，页面空白有两个原因，第一个是因为路径找不到造成的页面空白，第二个是渲染问题。其次就是后台接口404错误。在这里，我会建一个新的vue3项目，来重新走一遍打包时遇到的坑。 vue3打包上线后页面空白 vue3打包上线后调用后台接口...
vite打包配置
weixin_55737212的博客
03-30 657
【代码】vite打包配置。
vite详细打包配置，包含性能优化、资源处理...
最新发布
weixin_52630341的博客
04-22 578
实际配置时需根据项目具体需求调整参数，建议结合。实现多环境差异化打包。
Vite打包配置
weixin_61485030的博客
10-27 1820
vite常见配置
关于vite打包的一些配置
weixin_45644355的博客
06-01 2309
【代码】关于vite打包的一些配置。
Vue3+vite打包配置及部分打包优化~
m0_62626838的博客
08-10 6095
1、步骤一：配置base。这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。2、步骤二：可根据需要配置组件及静态资源路径别名（若配置了路径别名使用方法和typescript的类型别名一样，直接替换原路径即可）这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）3、步骤三：配置生产环境移除console.log。
vite构建打包优化配置
m0_49385985的博客
03-26 8464
最近使用构建项目，由于项目内容较多，所以遇到了一些性能问题，所以在构建生产环境时做了一些优化，在这里做一个记录。
基于vue前台、java后台、mysql实现的档案管理系统源码+部署说明.zip
10-26
本系统前台基于vue开发，使用vue脚手架vite打包。以管理员身份运行控制台，cd到前台项目目录下，输入指令npm run build，指令执行完毕后，会在项目目录下生成dist文件夹，该文件夹中的文件为打包后的前台代码。将...
基于Vue3+ElementPlus+Pinia+Vite+Axios的智慧社区前台管理界面源码+项目说明.zip
04-10
基于Vue3+ElementPlus+Pinia+Vite+Axios的智慧社区前台管理界面源码+项目说明.zip ## 介绍 - 基于 Vue3、TypeScript、Element Plus、Vue Router、Pinia、Axios、Vite 等开发的后台管理系统模版 ## 安装 注意：需...
likeadmin通用管理后台（Java）快速开发、一键生成代码、后台多端自适应、手机端、PC（电脑）
06-26
likeadmin是一套快速开发管理后台，使用流行的技术栈JDK8、Springboot2.5、MyBatis-Plus、TypeScript、Vue3、...手机端uniapp前台，含导导航配置、微信登录、个人登录等等基础功能，方便根据业务开发含手机前台的项目。
vite打包配置｜资源分类打包
Igiveufireworks的博客
10-19 6748
把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中
vite打包配置(静态资源合并打包/清除log/gzip压缩/ENV配置等)
热门推荐
shinjie1210的博客
01-13 5万+
vue3+vite项目的 vite打包配置,包含静态资源拆分打包\超大静态资源拆分\静态资源压缩\去除console和debugger\旧版chorme和ie兼容\ENV配置等内容,持续更新中
vite里的Rollup打包配置
青蛙king的博客
08-22 6342
在使用 vite 配置其 build 属性时，我们可以通过 build.rollupOptions 来自定义底层的 Rollup 打包配置（
vite打包配置以及性能优化
夜空孤狼啸的博客
08-16 1963
首先该安装的插件，你要安装一下吧这三个是最近本的，其他优化的插件下面会介绍到vite.config.ts文件中。
Vite多环境配置与打包:
2301_76662406的博客
10-06 4379
开发命令（如 npm run dev）默认使用开发模式。构建命令（如 vite build）默认使用生产模式。这两者并不冲突。在开发过程中，你通常使用开发模式，而在构建生产版本时，Vite 则使用生产模式。你的项目默认是开发环境，通常是因为没有显式指定其他环境模式。你可以通过查看 package.json、vite.config.js 和环境变量文件来确认和修改环境配置。
vite打包配置（gzip、文件分类等）
weixin_46547740的博客
02-24 6474
import compressPlugin from "vite-plugin-compression"; //静态资源压缩 import legacyPlugin from '@vitejs/plugin-legacy'; //浏览器兼容 export default defineConfig({ plugins: [ vue(), compressPlugin({ //gzip静态资源压缩 verbose: true, // 默认即可 disable: f
vite、webpack配置跨域
qq_36130269的博客
04-20 333
找到vite.config.ts。
electron-vite 打包配置
09-11
electron-vite 是一个基于 Vite 的 Electron 应用开发工具，它允许开发者使用 Vite 的现代前端特性来构建桌面应用。Electron 是一个使用 Web 技术来创建跨平台的桌面应用的框架，而 Vite 是一个现代的前端构建工具，以速度快、配置简单而著称。electron-vite 结合了两者的优势，使得开发 Electron 应用更加高效。 要对 electron-vite 进行打包配置，通常需要遵循以下步骤： 1. **项目初始化**：首先使用 npm 或 yarn 初始化项目，并安装 electron-vite 相关依赖。 2. **配置 Vite**：配置 Vite 的 `vite.config.js` 文件，这通常涉及到定义构建的入口文件、输出目录、服务器设置等。 3. **Electron 入口文件配置**：在 Electron 的主进程和渲染进程文件中配置启动逻辑，例如 `main.js` 和 `renderer.js`。 4. **打包设置**：使用 electron-vite 的构建命令或者自定义脚本进行打包。通常包括： - 设置构建目标环境，比如生产环境。 - 指定输出目录，通常是 `dist_electron` 或者其他自定义目录。 5. **构建命令**：在 `package.json` 的 `scripts` 中添加构建命令，例如 `"build": "electron-vite build"`，并执行此命令进行打包。 6. **打包后处理**：如果需要，可以在 Vite 构建后运行一些自定义脚本来处理构建产物，比如自动清理、代码签名等。 具体的 electron-vite 打包配置示例代码可能如下所示： ```javascript // vite.config.js import { defineConfig } from 'vite'; import { electron } from '@electron-forge/vite-plugin'; export default defineConfig({ plugins: [electron()], build: { outDir: 'dist_electron', target: 'node14', }, }); ``` 在 `package.json` 中添加构建脚本： ```json { "scripts": { "build": "vite build" } } ``` 执行 `npm run build` 或 `yarn build` 后，electron-vite 会根据配置文件进行打包，打包产物会输出到 `dist_electron` 目录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值