Vue3：初识Vue，Vite服务器别名及其代理配置
一、创建一个Vue3项目
创建Vue3项目默认使用Vite作为现代的构建工具，以下指令本质也是通过下载create-vue来构建项目。
基于NodeJs版本大于等于18.3，使用命令行进行操作。
1、命令执行
npm create vue@latest
输入项目名称
2、选择附加功能
选择要包含的功能，常用的Router、TypeScript等。
这样一个完整的Vue项目就构建完成了
二、Vite构建工具
1、简介
文档入口：Vite官方中文文档
2、基础配置
以命令行方式运行 vite 时，Vite 会自动解析
项目根目录下名为vite.config.js的配置文件（也支持其他 JS 和 TS 扩展名）。你可以显式地通过--config命令行选项指定一个配置文件（相对于 cwd 路径进行解析）
vite --config my-config.js
一个基础的配置框架如下：
// vite.config.js
export default {// 配置选项
}
同时可以使用defineConfig工具来获取类型，括号内部可以传递一个箭头函数去传递参数。其中command是根据运行服务器的控制台命令进行传参的。例如：npm run dev 这里的command就是dev，这个可以用于情景化配置。 而mode 参数默认有
development和production两种模式，默认是development的开发模式。注意：带箭头函数一定要加return才行。
import { defineConfig } from 'vite'
export default defineConfig({// ...
})
import { defineConfig } from 'vite'
export default defineConfig({ command, mode }) => {return{// ...}
})
插件配置使用
plugin字段配置相关插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({ command, mode }) => {return{plugins: [vue()]// ...}})别名配置，只要修改对应的@和./src即可，添加新的别名要以，号相隔。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({ command, mode }) => {return{resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},}})完整常用配置
import { defineConfig } from 'vite'
import { resolve } from "path"; // 主要用于alias文件路径别名
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()], // 配置需要使用的插件列表base: './', // 在生产中服务时的基本公共路径publicDir: 'public', // 静态资源服务的文件夹, 默认"public"resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},// 引入第三方的配置,强制预构建插件包server: {host: 'localhost', // 指定服务器主机名port: 3000, // 指定服务器端口open: true, // 在服务器启动时自动在浏览器中打开应用程序strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出https: false, // 是否开启 httpscors: true, // 为开发服务器配置 CORS。默认启用并允许任何源proxy: { // 为开发服务器配置自定义代理规则// 字符串简写写法 '/foo': 'http://192.168.xxx.xxx:xxxx', // 选项写法'/api': {target: 'http://192.168.xxx.xxx:xxxx', //代理接口changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})
3、环境变量
使用
loadEnv函数加载项目根目录下的env文件。在项目根目录下创建不同环境的 .env 文件。
比如：.env.development：开发环境使用.env.production：生产环境使用。根据相应的Vite模式会加载相应的环境
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。const env = loadEnv(mode, process.cwd(), '')return {// vite 配置define: {__APP_ENV__: JSON.stringify(env.APP_ENV),},}
})
解释一下process.cwd()相当于项目根目录，JSON.stringify会将对应值转换为JavaScript字符串。那么在其他代码里使用该环境变量呢？可以通过
process获得define定义的环境变量（define的作用是定义全局变量），以下是示例代码(只截取了一部分）。
// src/main.js
if (__APP_ENV__ === 'development') {console.log('当前处于开发环境');
} else {console.log('当前处于生产环境');
}// 使用 API_URL 环境变量
const apiUrl = process.env.API_URL;
console.log('API 地址:', apiUrl);
4、服务配置
文档：serverConfig
server的常用基础配置如下
export default defineConfig({server: {host: 'localhost', // 指定服务器主机名port: 3000, // 指定服务器端口open: true, // 在服务器启动时自动在浏览器中打开应用程序,也可以指定urlstrictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出https: false, // 是否开启 httpscors: true, // 为开发服务器配置 CORS。默认启用并允许任何源proxy: { // 为开发服务器配置自定义代理规则// 字符串简写写法 '/foo': 'http://192.168.xxx.xxx:xxxx', `在这里插入代码片`// 选项写法'/api': {target: 'http://192.168.xxx.xxx:xxxx', //代理接口changeOrigin: true,//是否允许跨域rewrite: (path) => path.replace(/^\/api/, '')}}}
})四种代理的编写方法如下，分别为
字符串简写、带选项、正则、使用proxy实例这四种写法。
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,},},},
})
三、总结
本次博客主要记录一下在学习Vue过程中，创建项目的过程以及Vite服务器的基本配置，其中跨域问题，需要代理服务器的配置，那四种配置对应第四种还不是很理解，博客还有待完善。
相关文章：
Vue3：初识Vue，Vite服务器别名及其代理配置
一、创建一个Vue3项目 创建Vue3项目默认使用Vite作为现代的构建工具，以下指令本质也是通过下载create-vue来构建项目。 基于NodeJs版本大于等于18.3，使用命令行进行操作。 1、命令执行 npm create vuelatest输入项目名称 2、选择附加功能 选择要包含的功…...
)
医疗场景与事件驱动的高匹配颗粒度医疗智能体研发方向探析(代码版)
结合技术实现、应用场景与挑战展开分析： 一、医疗场景驱动的智能体核心方向 全场景覆盖的诊疗辅助医疗智能体系统编程方案 1.1、技术架构设计 #mermaid-svg-OKB0oAt38jXWNClG {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#m…...
HTML5 浏览器兼容性：让旧浏览器也能拥抱 HTML5
在前端开发领域，HTML5 带来了一系列令人兴奋的新特性和功能，极大地提升了用户体验和开发效率。然而，由于互联网用户使用的浏览器版本千差万别，部分旧版本浏览器并不支持 HTML5，这给开发者带来了兼容性方面的挑战。不过…...
Kubernetes 集群搭建（三）：使用dashboard用户界面（需要访问外网获取yaml）
（一）简介 K8s Dashboard是Kubernetes提供的一种基于Web的用户界面工具，用于可视化地管理和监控Kubernetes集群 主要功能： 资源查看与管理： 查看Kubernetes集群中的各种资源，如节点、Pod、服务、部署等。 对…...
【图像处理基石】什么是ISP色彩管理？
在ISP（Image Signal Processor，图像信号处理器）管线中，色彩管理是图像处理流程的核心环节，主要负责从传感器原始数据（RAW）到最终输出图像（如YUV、RGB或JPEG）的色彩转换、…...
金融维度下的公链价值重构：重塑财富新秩序
公链的引言： 众人对 Crypto、Token 的探讨热度居高不下。在此大背景下，我打算另辟蹊径，从金融维度重新剖析区块链分布式账本。那么，我们究竟该如何正确认知它？又该如何搭建起一套从金融视角出发的分析框架呢࿱…...
_34)
LeetCode算法题(Go语言实现)_34
题目 考虑一棵二叉树上所有的叶子，这些叶子的值按从左到右的顺序排列形成一个 叶值序列 。 如果有两棵二叉树的叶值序列是相同，那么我们就认为它们是 叶相似 的。 如果给定的两个根结点分别为 root1 和 root2 的树是叶相似的，则返回 true&…...
# 项目部署指南：Flask、Gradio与Docker实现流程
Python项目部署指南：Flask、Gradio与Docker实践 1. 引言 在机器学习和Web开发中，将模型或应用部署为在线服务是关键一步。本文将介绍如何使用 Flask 和 Gradio 快速构建前端界面，并通过 Docker 容器化实现高效部署，涵盖完整流程图…...
2022第十三届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组（题解解析）
记录刷题的过程、感悟、题解。 希望能帮到，那些与我一同前行的，来自远方的朋友😉 大纲： 1、九进制转十进制-（解析）-简单的进制转化问题😄 2、顺子日期-（解析）-考察日期 3…...
UML之序列图的参与者与生命线
序列图是建模过程中必选的一种描述行为的手段，它展示在某些有用的行为中元素之间的消息交换和相互作用。交互是构成行为的一个单元；这些元素必须是可连接元素，通常将这些可连接元素称为交互中的参与者（Participants）。…...
基于Python Flask快速构建网络安全工具资源库的Web应用实践
引言 在网络安全领域，信息收集（OSINT）是渗透测试、漏洞挖掘和威胁分析的关键环节。然而，面对海量工具和分散的技术文档，安全研究人员常需耗费大量时间查找和比对工具信息。本文将介绍如何利用 Python Flask HTML 技…...
xv6-labs-2024 lab1
lab-1 注：实验环境在我的汇编随手记的末尾部分有搭建教程。 0.前置 第零章 xv6为我们提供了多种系统调用，其中，exec将从某个文件里读取内存镜像(这确实是一个好的说法)，并且将其替换到调用它的内存空间，也就是这个…...
HTTP Form v.s. Flask-WTF Form v.s. Bootstrap Form
在Flask-WTF和Bootstrap 的Form创建中，添加了页面显示Flash Messages。 相比Flask_WTF, Bootstrap用 render_form(form)渲染样式，自动带错误提示，不需要像Flask_WTF那样手写 for error in ... 。 项目结构： register_app/ ├── HTTP_Form_App.py ├── FlaskWTF_Form…...
Linux网络编程——https的协议及其加密解密方式
目录 一、前言 https协议 常见的加密方式 1、对称加密 2、非对称加密 3、数字签名 1. 只用对称加密 2、只用单一的非对称加密 3、双方都使用非对称加密 4、非对称加密对称加密 证书 证书颁发流程 服务器与客户端的证书验证流程 5、证书非对称加密对称加密 前言 上一…...
Node.js 下载与安装（图文）
下载 官网：【直达：https://nodejs.org/en/】。 点击【Download】，选择【版本，系统】。点击【Windows Installer(.msi)】。 安装 双击【.msi文件】，选择【安装路径】，也可以一直【下一步】。 查看版本 …...
3.31-4.06 Web3 游戏周报：Pebble 玩家留存率登顶，Treasure DAO 面临重组危机
回顾上周的区块链游戏概况，查看 Footprint Analytics 与 ABGA 最新发布的数据报告。 【3.31–4.06】Web3 游戏行业动态 链游生态系统 Treasure DAO 因财务危机面临重组，将终止游戏运营和 Treasure Chain3A 链游 Shrapnel 开发商 Neon Machine 深陷财务…...
echarts生成3D立体地图react组件
地图散点图效果： react项目中安装echarts、echarts-gl依赖： npm install echarts echarts-gl 文件目录结构： 地图组件map目录下文件代码，点击散点图圆点触发事件handleCityClick： index.jsx： import { …...
Node.js 中处理 Excel 文件的最佳实践
在现代应用开发中，Excel 文件仍然是数据交换和存储的重要格式之一。在 Node.js 环境中，处理 Excel 文件的需求日益增加。本文将介绍如何在 Node.js 中高效地处理 Excel 文件，涵盖工具选择、基本操作和最佳实践。 1. 选择合适的库 在 Node.js…...
解决Ubuntu系统鼠标不流畅的问题
电脑是联想的台式组装机，安装ubuntu系统（不管是16、18、20、22）后，鼠标都不流畅。最近几天想解决这个问题，于是怀疑到了显卡驱动上。怀疑之前一直用的是集成显卡，而不是独立显卡，毕竟2060的显卡…...
【Linux】虚拟机设置静态IP
主播我今天下午学了几节微服务课，上课的时候，直接把手机拿走了去上课（电脑连的我手机的热点），虚拟机没关，晚上主播我回来继续学，电脑连上热点之后，发现虚拟机连接不上了，…...
Web API：AbortController
Web API：AbortController 主要用途基本工作原理基本用法示例高级用例1. 实现请求超时2. 取消多个请求3. 与其他异步 API 一起使用 浏览器支持总结 主要用途 AbortController 是一个 Web API，主要用于取消一个或多个 Web 请求（如 fetch 请求&…...
服务器配置虚拟IP
服务器配置虚拟IP的核心步骤取决于具体场景，主要包括本地单机多IP配置和高可用集群下的虚拟IP管理两种模式。 一、本地虚拟IP配置（单服务器多IP） 基于Linux系统： 确认网络接口：使用 ip addr 或 ifconfig 查…...
《AI大模型应知应会100篇》第5篇：大模型发展简史：从BERT到ChatGPT的演进
第5篇：大模型发展简史：从BERT到ChatGPT的演进 摘要 近年来，人工智能领域最引人注目的进步之一是大模型（Large Language Models, LLMs）的发展。这些模型不仅推动了自然语言处理（NLP）技术的飞跃&…...
)
小球反弹(蓝桥杯C语言)
有一长方形，长为 343720343720 单位长度，宽为 233333233333 单位长度。在其内部左上角顶点有一小球 (无视其体积)，其初速度如图所示且保持运动速率不变，分解到长宽两个方向上的速率之比为 dx:dy15:17dx:dy15:17。小球碰到长方形的…...
Java面试39-Zookeeper中的Watch机制的原理
Zookeeper是一个分布式协调组件，为分布式架构下的多个应用组件提供了顺序访问控制能力。它的数据存储采用了类似于文件系统的树形结构，以节点的方式来管理存储在Zookeeper上的数据。 Zookeeper提供了一个Watch机制，可以让客户端感知到Zooke…...
3️⃣ Coze工作流基础教学（2025年全新版本）
目录 一、什么是工作流 二、为什么用工作流 三、工作流使用场景 四、怎么学习工作流 五、工作流功能概述 六、制作工作流基础流程 6.1 创建工作流 6.2 配置工作流 6.3 调试工作流 6.4 发布工作流 6.5 使用工作流 6.6 复制工作流 6.7 删除工作流 6.8 设置工作流异…...
备战蓝桥杯——走迷宫问题（BFS解决）
这是一个经典的BFS算法 1. BFS算法保证最短路径 核心机制：广度优先搜索按层遍历所有可能的路径，首次到达终点的路径长度即为最短步数。这是BFS的核心优势。队列的作用：通过队列按先进先出的顺序处理节点，确保每一步探索的都是当…...
usbip学习记录
USB/IP: USB device sharing over IP make menuconfig配置： Device Drivers -> Staging drivers -> USB/IP support Device Drivers -> Staging drivers -> USB/IP support -> Host driver 如果还有作为客户端的需要，继续做以下配置&a…...
mlir-tblgen 的应用渐进式示例
示例01 -gen-dialect-decls toy_dia.1.toy include "mlir/IR/OpBase.td" //include "mlir/IR/FunctionInterfaces.td" //include "mlir/IR/SymbolInterfaces.td" //include "mlir/Interfaces/SideEffectInterfaces.td"def Toy_Diale…...
AI大模型与未来社会结构的重构：从工具到共生体
一、引言：从蒸汽机到ChatGPT，文明的每一次跃迁都始于“工具的自我进化” 历史长河中，每一次技术革命，都伴随着人类社会组织、认知方式乃至价值体系的巨变。从18世纪的蒸汽机到20世纪的信息技术，再到21世纪的人工智能&…...
试题速浏、分类及浅析)
2015年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析
2015年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...
免费Deepseek-v3接口实现Browser-Use Web UI：浏览器自动化本地模拟抓取数据实录
源码 https://github.com/browser-use/web-ui 我们按照官方教程，修订几个环节，更快地部署 步骤 1：克隆存储库 git clone https://github.com/browser-use/web-ui.git cd web-ui Step 2: Set Up Python Environment 第 2 步：设置…...
Bash判断命令是否存在
在 Bash 脚本里，你可以通过多种方法判断某个命令是否存在。下面为你详细介绍几种常见的判断方式。 1. 使用command -v command -v命令能够返回指定命令的可执行文件路径，如果该命令不存在则不会有输出。借助这一特性，我们可以结合条件判断语…...
)
双指针(滑动窗口)
用于在数组或字符串的进行快速排序 匹配 排序或移动操作。 双指针不是真的指针，只是用两个变量来表示下标(在后面都用指针来表示) 双指针往往和单调性 排序 联系在一起，暴力往往是O(n方)双指针利用单调性可以优化到o(n) 有对撞指针 快慢指针 美丽区间…...
在PPT中同时自动播放多个视频的方法
在PPT中同时自动播放多个视频的方法 文章目录 在PPT中同时自动播放多个视频的方法1 准备视频2 设置动画为“出现”3 设置所有视频为“自动播放”4 最终效果与其他设置 在PPT制作的过程中，我们经常遇到需要同时自动播放多个视频的情况。本文将详细介绍实现这种效果的…...
使用 Vue 快速集成 FullCalendar 日历组件教程
FullCalendar 是一款功能强大的 JavaScript 日历组件，支持 React/Vue 等主流框架，提供丰富的日历视图和交互功能。本文将手把手教你在 Vue 项目中快速集成，并演示核心功能实现。 📦 主要特性亮点 ✅ 月/周/日多视图切换 ✅…...
xv6-labs-2024 lab2
lab-2 0. 前置 课程记录 操作系统的隔离性，举例说明就是，当我们的shell，或者qq挂掉了，我们不希望因为他，去影响其他的进程，所以在不同的应用程序之间，需要有隔离性，并且࿰…...
redis导入成功，缺不显示数据
SpringBootTest class SecurityApplicationTests {AutowiredStringRedisTemplate template; //添加这句代码，自动装载，即可解决文章三处代码报错Testvoid contextLoads() {String compact Jwts.builder().signWith(Jwts.SIG.HS512.key().build()).subj…...
Flink对比Spark streaming、Storm
对比Spark streaming、Storm 产品 模型 语义 容错机制 状态管理 延时 吞吐量 Storm native at-least-once ack 无 low low Spark streaming micro-batch exactly-once RDD checkpoint 有 medium high Flink native exactly-once checkpoint 有 low …...
力扣316去除重复字母-单调栈
题目来源: 给你一个字符串 s ，请你去除字符串中重复的字母，使得每个字母只出现一次。需保证 返回结果的字典序最小（要求不能打乱其他字符的相对位置）。 示例 1： 输入：s "bcabc" 输出ÿ…...
第421场周赛：数组的最大因子得分、
Q1、数组的最大因子得分 1、题目描述 给你一个整数数组 nums。 因子得分 定义为数组所有元素的最小公倍数（LCM）与最大公约数（GCD）的 乘积。 在 最多 移除一个元素的情况下，返回 nums 的 最大因子得分。 注意&…...
COMSOL 与人工智能融合的多物理场应用：28个案例的思路、方法与工具概述
应用案例概述 基于 COMSOL 与人工智能（AI）结合的应用案例涵盖了 28 个多领域场景，包括工程（如热传导优化、结构力学预测）、能源（如电池热管理、燃料电池性能）、生物医学（如药物传递…...
【算法】插入排序
算法系列五：插入排序 一、直接插入排序 1.原理 2.实现 3.性质 3.1时间复杂度 3.2空间复杂度 3.3稳定性 二、希尔排序 1.原理 1.1优化方向 1.2优化原理 2.设计 2.1比较无序时 2.2比较有序时 3.实现 4.性质 4.1时间复杂度 4.2空间复杂度 4.3稳定性…...
企业展示型网站模板HTML5网站模板下载指南
在当今数字化浪潮中，企业网站已成为企业展示形象、推广产品和服务的重要窗口。一个设计精美、功能完善的企业展示型网站，不仅能提升企业的品牌形象，还能吸引潜在客户，促进业务增长。而HTML5网站模板，凭借其跨平台兼容性…...
C盘清理——快速处理
C盘清理 | 快速处理 软件：小番茄C盘清理 https://ccleancdn.xkbrowser.com/cleanmaster/FanQieClean_13054_st.exe 前言：为什么需要专业的C盘清理工具？ 作为一位长期与Windows系统打交道的技术博主，我深知C盘空间不足带来的痛苦…...
什么是模型驱动开发MDD?有哪些应用场景？
模型驱动开发（Model-Driven Development，MDD）是一种以模型为核心的软件开发方法，其核心思想是通过创建高层次的抽象模型来描述系统的结构和行为，而非直接编写代码。这些模型经过自动化工具的转换或生成，最终…...
uniapp小程序生成海报/图片并保存分享
调研结果： 方法一：canvasuni.canvasToTempFilePath耗时太长，现在卡在canvas的绘制有问题，canvas绘制的部分东西不生效但是找不到原因 方法二：使用wxml-to-canvas其实也差不多是用canvas手动绘制，可能会卡在…...
从IoT到AIoT：智能边界的拓展与AI未来趋势预测
文章目录 引言：从连接万物到感知万物1. AIoT的本质：将智能嵌入万物2. AIoT的推动力量与挑战2.1 推动力量2.2 关键挑战 3. 五大AIoT未来趋势预测趋势一：边缘智能将成为主流架构趋势二：AI模型将向自适应与多任务演进趋势三ÿ…...
试题速浏、分类及浅析)
2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析
2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...
2140 星期计算
2140 星期计算 ⭐️难度：中等 🌟考点：2022、思维、省赛 📖 📚 1️⃣法一： 同余定理， import java.util.Scanner;public class Main2 {public static void main(String[] args) {Scanner sc …...