当前位置: 首页 > news >正文

Vite打包配置

Vite打包配置

1.项目启动自动打开网页

{"scripts": {"dev": "vite --open"}
}

2.base配置打包公共路径

配置base选项的作用主要是指定项目在开发或生产环境中的公共基础路径。这个配置项对于确保资源能够正确加载尤为关键,尤其是在项目被部署到子路径的情况下。

'base:'/finyou'

例如,如果项目被部署到服务器的/my-app/路径下,那么可以在vite.config.tsvite.config.js文件中配置base’/my-app/'。这样,在开发环境中,Vite开发服务器就会以这个基础路径来提供资源;在生产环境中,构建后的资源也会包含这个基础路径,从而确保它们能够被正确加载和访问。

3.alias配置路径别名

//不配置情况
import HelloWorld from './components/HelloWorld.vue'
//配置后的情况
import HelloWorld from '@/components/HelloWorld.vue'
 resolve:{alias:{'@':resolve(__dirname,'src'),//配置图片别名"@img":resolve(__dirname,'src/assets')}}

如果你是ts项目还需而外配置,不然进行ts检查会报错

//tsconfig.app.json
"baseUrl": ".","paths": {"@/*": ["src/*"]}

4.生产环境时移除console.log的配置

默认为 Esbuild它比 terser 快 20-40 倍,压缩率只差 1%-2%。

terser

使用terser需要安装terser

npm add -D terser
 build:{minify:'terser',terserOptions:{compress:{​    drop_console:true,​    drop_debugger:true}}}

Esbuild(开发环境也没用)

esbuild: {drop: ['console', 'debugger'],
}

element-plus按需引用

不用在main.ts中导入element-plus

npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

mock数据配置

npm i vite-plugin-mock mockjs -D

[vite-plugin-mock配置](vite-plugin-mock/README.zh_CN.md at main · vbenjs/vite-plugin-mock)

前端跨域代理

export default defineConfig({server: {proxy: {// 字符串简写写法:http://localhost:5173/foo -> http://localhost:4567/foo'/foo': 'http://localhost:4567',// 带选项写法:http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},// 正则表达式写法:http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/'^/fallback/.*': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/fallback/, ''),},// 使用 proxy 实例'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,configure: (proxy, options) => {// proxy 是 'http-proxy' 的实例}},// 代理 websockets 或 socket.io 写法:ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io// 在使用 `rewriteWsOrigin` 时要特别谨慎,因为这可能会让代理服务器暴露在 CSRF 攻击之下'/socket.io': {target: 'ws://localhost:5174',ws: true,rewriteWsOrigin: true,},},},
})

CDN配置

npm install vite-plugin-cdn-import --save-dev
 cdn({modules:[{name: 'vue',var: 'Vue',path: 'https://unpkg.com/browse/vue@3.5.12/dist/vue.cjs.js'},{name: 'element-plus',var: 'ElementPlus',path: 'https://unpkg.com/browse/element-plus@2.8.6',css:'https://unpkg.com/browse/element-plus@2.8.6/dist/index.css'},]})
app.use(ElementPlus)

Gzip代码压缩

npm i vite-plugin-compression -D
import viteCompression from 'vite-plugin-compression';
export default () => {return {plugins: [viteCompression()],};
};

仍然需要nginx开启gzip压缩,浏览器才会走gzip压缩

图片打包(包下载失败)

[文档](vite-plugin-imagemin/README.zh_CN.md at main · vbenjs/vite-plugin-imagemin)

npm i vite-plugin-imagemin -D

相关文章:

Vite打包配置

Vite打包配置 1.项目启动自动打开网页 {"scripts": {"dev": "vite --open"} }2.base配置打包公共路径 配置base选项的作用主要是指定项目在开发或生产环境中的公共基础路径。这个配置项对于确保资源能够正确加载尤为关键,尤其是在…...

node集成redis (教学)

文章目录 前言一、安装redis二、可视化界面测试连接1.vscode安装插件 三、node代码编写1.先安装两个库(redis和ioredis)2.测试连接 (前提是你的redis服务器要启动起来) 总结 前言 在Node.js中集成ioredis是一个常见的做法&#x…...

江协科技STM32学习- P22 实验-ADC单通道/ADC多通道

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…...

RL学习笔记-马尔可夫过程

参考资料:蘑菇书、周博磊老师课程 在强化学习中,智能体与环境交互是通过马尔可夫决策过程来表示的,因此马尔可夫决策过程是强化学习的基本框架。 马尔可夫性质 指一个随机过程在给定现在状态及所有过去状态情况下,其未来状态的条件…...

LeetCode Hot 100:动态规划

LeetCode Hot 100&#xff1a;动态规划 70. 爬楼梯 class Solution { public:int climbStairs(int n) {if (n 0)return 0;vector<int> dp(n 1);// 初始化dp[0] 1;// 状态转移for (int i 1; i < n; i) {dp[i] dp[i - 1];if (i > 2)dp[i] dp[i - 2];}return …...

使用Python制作雪景图片教程

如果你想用Python写一个程序来输出有关“深夜雪”的诗意文本或描述&#xff0c;可以通过简单的字符串输出来实现。以下是一个示例代码&#xff0c;展示如何用Python来描绘深夜雪的场景。 # 定义深夜雪的描述 description """ 夜幕降临&#xff0c;天空洒下银色…...

S-Function

目录 S-Function介绍 生成S-Function的三种常用手段 使用手写S-函数合并定制代码 使用S-Function Builder块合并定制代码 使用代码继承工具合并定制代码 S-Function介绍 我们可以使用S-Function扩展Simulink对仿真和代码生成的支持。例如&#xff0c;可以使用它们&#xf…...

如何具备阅读JAVA JDK虚拟机源码能力

源码位置https://github.com/openjdk/jdk 核心实现源码[部分截图] /* * Copyright (c) 1995, 2024, Oracle and/or its affiliates. All rights reserved. * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. * * This code is free software; you can redistr…...

Python | Leetcode Python题解之第514题自由之路

题目&#xff1a; 题解&#xff1a; Test "godding" target "d"i 0left i lc 0 right i rc 0while Test[left] ! target:left - 1lc 1if left -1:left len(Test) - 1while Test[right] ! target:right 1rc 1if right len(Test):right 0prin…...

Docker 镜像下载问题及解决办法

Docker 镜像下载问题及解决办法 我在杂乱的、破旧的村庄寂寞地走过漫长的雨季&#xff0c;将我年少的眼光从晦暗的日子里打捞出来的是一棵棵开花的树&#xff0c;它们以一串串卓然不俗的花擦明了我的眼睛&#xff0c;也洗净了我的灵魂。 引言 在使用 Docker 时&#xff0c;用户…...

2分钟搞定 HarmonyOs Next创建模拟器

官方文档参考链接&#xff1a; 创建模拟器-管理模拟器-使用模拟器运行应用/服务-应用/服务运行-DevEco Studio - 华为HarmonyOS开发者https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-emulator-create-V5 1. 首先打开Device Manager 2. 进入这个界面后…...

方形件排样优化与订单组批问题探析

方形件排样优化与订单组批问题是计算复杂度很高的组合优化问题&#xff0c;在工业工程中有很广泛的应用背景。为实现个性化定制生产模式&#xff0c;企业会选择订单组批的方式&#xff0c;继而通过排样优化实现批量切割&#xff0c;加工完成后再按照不同客户需求进行分拣&#…...

vue3组件通信--自定义事件

自定义事件是典型的子传父的方法。 为什么叫自定义事件呢&#xff1f;是因为我们用sendToy"getToy"这种格式写&#xff0c;很显然&#xff0c;在DOM中&#xff0c;没有叫sendToy的事件。 父组件FatherComponent.vue: <script setup> import ChildComponent fr…...

ubuntu 安装k3s

配置hostname的方法为 hostnamectl set-hostname k3sserver hostnamectlsudo apt-get update && sudo apt-get upgrade -y sudo apt-get install -y curl#手动下载v1.31.1k3s1 https://github.com/k3s-io/k3s/releases/tag/v1.31.1%2Bk3s1 #将k3s-airgap-images-amd64…...

SQL CHECK 约束:确保数据完整性的关键

SQL CHECK 约束:确保数据完整性的关键 在数据库管理中,确保数据的完整性和准确性是至关重要的。SQL(Structured Query Language)提供了多种约束条件来帮助实现这一目标,其中之一就是 CHECK 约束。本文将深入探讨 SQL CHECK 约束的概念、用法和优势,并展示如何在不同的数…...

C++ | Leetcode C++题解之第502题IPO

题目&#xff1a; 题解&#xff1a; typedef pair<int,int> pii;class Solution { public:int findMaximizedCapital(int k, int w, vector<int>& profits, vector<int>& capital) {int n profits.size();int curr 0;priority_queue<int, vect…...

《虚拟现实的边界:探索虚拟世界的未来可能》

内容概要 在虚拟现实&#xff08;VR&#xff09;技术的浪潮中&#xff0c;我们见证了其从实验室的奇想逐渐走向日常生活的非凡旅程。技术发展的背后是不断突破的创新&#xff0c;早期的设备虽然笨重&#xff0c;但如今却趋向精致、轻巧&#xff0c;用户体验显著提升。想象一下…...

Rust教程

2024 Rust现代实用教程&#xff1a;1.1Rust简介与安装更新––2024 Rust现代实用教程&#xff1a;1.2编译器与包管理工具以及开发环境–––––––––––...

测试代理IP的有效性和可用性

使用代理IP的有效性和可用性直接关系到用户的工作效率&#xff0c;尤其是在进行数据抓取、网络爬虫和保护个人隐私等场景中。 一、测试代理IP的必要性 代理IP的可用性测试是确保代理服务正常运行的重要步骤。测试代理IP的必要性主要体现在以下几个方面&#xff1a; 提升工作…...

散列表:为什么经常把散列表和链表放在一起使用?

散列表:为什么经常把散列表和链表放在一起使用? 在计算机科学中,散列表(哈希表)和链表是两种常见的数据结构。你可能会好奇,为什么它们经常被放在一起使用呢?让我们一起来深入探讨这个问题。 一、散列表的特点 散列表是一种根据关键码值(Key value)而直接进行访问的…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...