vue.config.js 配置 devserve 配置
在 Vue CLI 项目中,devServer 配置用于设置开发服务器的行为。这包括了开发服务器的端口、主机名、是否开启 HTTPS、自动打开浏览器等设置,以及配置代理规则来解决跨域问题。
devServer 配置详解(version >= 4.0.0)
-
host: 设置开发服务器的主机地址,默认为'localhost'。 -
port: 设置开发服务器的端口号,默认为 8080。 -
https: 设置是否使用 HTTPS 协议,默认为false。 -
hot: 是否启用 HMR(Hot Module Replacement)。默认值为true。 -
open: 设置是否在启动服务器时自动打开浏览器,默认为false。 -
client: 浏览器端运行的一些脚本,这些脚本负责与webpack-dev-server通信。logging: 允许在浏览器中设置日志级别,'log','info','warn','error','none','verbose'。overlay: 是否显示全屏的错误/警告覆盖层。 默认值为{ warnings: true, errors: true }。progress: 是否显示构建进度条。默认值为 true。reconnect: 告诉 dev-server 它应该尝试重新连接客户端的次数。当为true时,它将无限次尝试重新连接(v4.4.0+)。webSocketURL: 这个选项允许指定 URL 到web socket服务器(当你代理开发服务器和客户端脚本不总是知道连接到哪里时很有用)例:webSocketURL: 'ws://0.0.0.0:8080/ws'。webSocketTransport: 该配置项允许我们为客户端单独选择当前的 devServer 传输模式,或者提供自定义的客户端实现。这允许指定浏览器或其他客户端与 devServer 的通信方式。
为
webSocketServer设置'ws'或者'sockjs'是一个设置devServer.client.webSocketTransport和devServer.webSocketServer的快捷方式。 -
liveReload: 默认情况下,当监听到文件变化时dev-server将会重新加载或刷新页面。为了liveReload能够生效,devServer.hot配置项必须禁用或者devServer.watchFiles配置项必须启用。将其设置为false以禁用devServer.liveReload -
headers: 为所有 HTTP 添加响应头。例如{ 'X-Custom-Header': 'value' }。 -
server: 允许设置服务器和配置项'http','https','spdy'(默认为'http',v4.4.0+)。 -
compress: 是否启用 gzip 压缩。默认值为true。 -
webSocketServer: 该配置项允许我们选择当前的 web-socket 服务器或者提供自定义的 web-socket 服务器实现, 配置项false,'sockjs','ws'(默认为'ws')。该模式使用ws作为服务器,客户端中的WebSockets。 -
proxy: 设置代理规则,用于解决开发环境下的跨域问题。target: 代理的目标地址,即后端 API 的地址。changeOrigin: 是否改变源,设置为true会使 Origin 请求头中的主机名变为目标 URL 的主机名。pathRewrite: 重写路径,用于替换请求路径中的某些部分。secure: 是否验证 SSL 证书。默认值为true。logLevel: 代理的日志级别。可选值为'debug','info','warn','error'。默认值为'warn'。ws: 是否代理websockets。默认值为false。router: 路由规则,用于根据请求路径重定向代理。context: 匹配条件,可以是正则表达式或字符串数组。bypass: 一个函数,返回一个 URL 字符串或false。如果返回 URL,则直接请求该 URL;如果返回false,则使用代理。
其他配置
contentBase: 开发服务器提供的静态文件目录。默认值为public目录。historyApiFallback: 是否启用 HTML5 history API 的回退。默认值为true。before: 在服务器启动之前执行的函数,可以用来注册中间件。after: 在服务器启动之后执行的函数,可以用来注册中间件。setupMiddlewares: 是否设置中间件。默认值为true。
示例:
module.exports = {devServer: {host: '0.0.0.0', // 让你的服务器可以被外部访问port: 8080, // 端口https: false, // 不使用 HTTP 提供服务hot: true, // 模块热替换open: true, // 打开浏览器client:{overlay: { // 当出现编译错误或警告时,在浏览器中显示全屏覆盖。warnings: true,errors: true},progress: true, // 在浏览器中以百分比形式打印编译进度。},headers: { // 设置请求头'X-Custom-Header': 'value'},compress: true, // 启用 gzip 压缩proxy: {'/api': { // 对 /api 的请求会将请求代理到 http://localhost:4000。target: 'http://localhost:4000',changeOrigin: true, // 使 Origin 请求头中的主机名变为目标 URL 的主机名secure: false, // 不验证 SSL 证书logLevel: 'warn', // 代理的日志级别ws: true, // 使用 WebSockets 作为服务器pathRewrite: { // 重写路径'^/api': ''},router: function(req) {if (req.url.startsWith('/api')) {return '/api';}return false;},context: ['/api'],bypass: function(req) {if (req.headers.accept.indexOf('html') !== -1) {return '/index.html';}}}},contentBase: './public', // 开发服务器提供的静态文件目录historyApiFallback: true, // 是否启用 HTML5 history API 的回退before: function(app, server) {// 在服务器启动之前执行的函数},after: function(app, server) {// 在服务器启动之后执行的函数},setupMiddlewares: true, // 设置中间件}
};
相关文章:
vue.config.js 配置 devserve 配置
在 Vue CLI 项目中,devServer 配置用于设置开发服务器的行为。这包括了开发服务器的端口、主机名、是否开启 HTTPS、自动打开浏览器等设置,以及配置代理规则来解决跨域问题。 devServer 配置详解(version > 4.0.0) host: 设置开发服务器的主机地址&a…...
不入耳耳机什么牌子性价比高?五大年度必选款揭秘
和传统的入耳式耳机相比,开放式耳机采用的是不深入耳道的设计,佩戴舒适度更高,卫生健康,安全性也更高。同时音质表现也更加有空间感。想要体验开放式耳机带来的便利,就需要做好选购攻略,不入耳耳机什么牌子…...
SQL Zoo 6.The JOIN operation
以下数据均来自SQL Zoo 1.Modify it to show the matchid and player name for all goals scored by Germany. To identify German players, check for: teamid GER.(它以显示德国所有进球的比赛和球员名字,识别德国球员) SELECT matchid,player FROM goal where teamid GE…...
视频教程:Vue3移动端抽屉弹层组件实战
本教程演示了vue3的composition api实现的移动端h5抽屉弹层组件,录屏讲解包含了功能演示和具体的源码实现。 笔者相关教程: 使用tailwindcss轻松实现移动端rem适配Vue3.4双向绑定新特性:defineModel好用爱用 学习要点: 自定义…...
CSS 的 BFC(块级格式化上下文)
BFC是Block Formatting Context(块级格式化上下文)的缩写,是CSS中一个概念,用于描述页面上如何对元素进行布局。 BFC是一个独立的容器,它内部的元素不会受到外部容器的影响,同时它也会影响其内部元素的表现…...
【2023年】云计算金砖牛刀小试2
A场次题目:Openstack 平台部署与运维 control172.17.31.10compute172.17.31.20 compute任务1 私有云平台环境初始化 1.初始化操作系统 使用提供的用户名密码,登录竞赛云平台。根据表 1 中的 IP 地址规划,设置各服务器节点的 IP 地址,确保网络正常通信,设置控制节点主机名…...
python--将mysql建表语句转换成hive建表语句
1.代码 import json import sys import pymysqldef queryDataBase(tablename):# 连接数据库并查询列信息conn pymysql.connect(userroot, password123456, hosthadoop11)cursor conn.cursor()cursor.execute("SELECT column_name, data_type FROM information_schema.C…...
异步调用实践:Async,Future, TaskExecutor、EventListener
1. 异步调用概述 异步调用允许一个方法调用在不被当前线程阻塞的情况下继续执行,而调用者可以继续执行其他任务,直到异步操作完成。 在Spring Boot中,异步调用常用于提高应用的响应性和吞吐量,尤其是在处理长时间运行的任务时&a…...
Flask 异常处理
Flask 异常处理 使用 app.errorhandler 装饰器使用 app.handle_exception 装饰器使用 register_error_handler调试模式总结 在 Flask 应用中,异常处理是一个非常重要的部分,它可以帮助你管理运行时错误,提供友好的错误页面,以及记…...
【海思SS626 | 内存管理】海思芯片的OS内存、MMZ内存设置
😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…...
linux crontab没有按照规则执行排查
配置了cron规则,但是一段时间后任务没有按预期执行,记录一次修复过程 检查crond服务 systemctl status crond规则正常 crontab -l脚本有执行权限 查看日志 第一种:journalctl journalctl -u crond | grep 03:00 -C 3-u 指定crond.serv…...
Cloudflare的D1使用技巧
总文档:https://developers.cloudflare.com/workers/wrangler/commands/#d1查询某个数据库中哪些命令占用资源最大: To find top 10 queries by execution count: npx wrangler d1 insights <database_name> --sort-typesum --sort-bycount --co…...
解决端口号被占用问题
第一种: 最简单有效的方法,重启一下电脑,占用此端口的程序就会释放端口。 第二种: 使用命令找到占用端口的程序,把它关闭。 1、打开运行窗口输入:CMD ,进入命令窗口。 2、输入:n…...
如何在linux上部署zabbix监控工具
<1>搭建服务机 1)首先我们先执行 sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/config #然后我们再把防火墙开机自启关掉 马上生效 systemctl disable --now firewalld 2)我们获得rpm包 rpm -Uvh https://mirrors.aliyun.com/…...
vulnhub系列:sp eric
vulnhub系列:sp eric 靶机下载 一、信息收集 nmap扫描存活,根据mac地址寻找IP nmap 192.168.23.0/24nmap扫描端口,开放端口:22、80 nmap 192.168.23.189 -p- -A -sV -Pndirb 扫描目录,.git 源码,admin…...
JVM二:JVM类加载机制
目录 前言 1.什么是类加载? 2.类加载整体流程 3.一个类什么时候被加载? 4.双亲委派模型 4.1 JVM默认提供了三个类加载器 4.1.1 BootstrapClassLoader 4.1.2 ExtensionClassLoader 4.1.3 ApplicationClassLoader 4.2 破坏双亲委派模型 前言 在上一篇文章中…...
对于springboot无法连接redis解决方案
对于springboot无法连接redis解决方案 一、测试是否能在本地应用上访问到你的redis(如果是部署在linux上的话)1. 开启telnet功能2. 开始测试端口是否能访问到(适用于所有,包括MQ)3. 开放6379端口4. 看spring的配置文件…...
关于android中的各种尺寸与计算
--张学友《心如刀割》很好听 先说几个术语: Screen size(屏幕尺寸): 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 摩托罗拉milestone手机是3.7英寸 Aspect Ratio(宽高比率)&am…...
MySQL避免索引失效的方法详细介绍
避免索引失效 在MySQL中,索引是帮助MySQL高效获取数据的数据结构。它就像一本书的目录,通过索引可以快速定位到数据的具体位置,从而减少对数据库的扫描量,提高查询速度。索引可以存储在表中的一个或多个列上,创建索引…...
【Java】深入了解 Java 的 charAt() 方法
我最爱的那首歌最爱的angel 我到什么时候才能遇见我的angel 我最爱的那首歌最爱的angel 我不是王子也会拥有我的angel 🎵 张杰《云中的angel》 在 Java 编程中,字符串(String)是我们经常处理的数据类型之一。…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持:CMake支持多种操作系统和编译器,使用同一份构建配置可以在不同的环境中使用 简化配置:通过CMakeLists.txt文件,用户可以定义项目结构、依赖项、编译选项等,无需手动编写复杂的构建脚本…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
【WebSocket】SpringBoot项目中使用WebSocket
1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖,添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...
Mysql故障排插与环境优化
前置知识点 最上层是一些客户端和连接服务,包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念,为通过安全认证接入的客户端提供线程。同样在该层上可…...
