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

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.webSocketTransportdevServer.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使用技巧

总文档&#xff1a;https://developers.cloudflare.com/workers/wrangler/commands/#d1查询某个数据库中哪些命令占用资源最大&#xff1a; To find top 10 queries by execution count: npx wrangler d1 insights <database_name> --sort-typesum --sort-bycount --co…...

解决端口号被占用问题

第一种&#xff1a; 最简单有效的方法&#xff0c;重启一下电脑&#xff0c;占用此端口的程序就会释放端口。 第二种&#xff1a; 使用命令找到占用端口的程序&#xff0c;把它关闭。 1、打开运行窗口输入&#xff1a;CMD &#xff0c;进入命令窗口。 2、输入&#xff1a;n…...

如何在linux上部署zabbix监控工具

<1>搭建服务机 1&#xff09;首先我们先执行 sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/config ​ #然后我们再把防火墙开机自启关掉 马上生效 systemctl disable --now firewalld 2&#xff09;我们获得rpm包 rpm -Uvh https://mirrors.aliyun.com/…...

vulnhub系列:sp eric

vulnhub系列&#xff1a;sp eric 靶机下载 一、信息收集 nmap扫描存活&#xff0c;根据mac地址寻找IP nmap 192.168.23.0/24nmap扫描端口&#xff0c;开放端口&#xff1a;22、80 nmap 192.168.23.189 -p- -A -sV -Pndirb 扫描目录&#xff0c;.git 源码&#xff0c;admin…...

JVM二:JVM类加载机制

目录 前言 1.什么是类加载? 2.类加载整体流程 3.一个类什么时候被加载? 4.双亲委派模型 4.1 JVM默认提供了三个类加载器 4.1.1 BootstrapClassLoader 4.1.2 ExtensionClassLoader 4.1.3 ApplicationClassLoader 4.2 破坏双亲委派模型 前言 在上一篇文章中&#xf…...

对于springboot无法连接redis解决方案

对于springboot无法连接redis解决方案 一、测试是否能在本地应用上访问到你的redis&#xff08;如果是部署在linux上的话&#xff09;1. 开启telnet功能2. 开始测试端口是否能访问到&#xff08;适用于所有&#xff0c;包括MQ&#xff09;3. 开放6379端口4. 看spring的配置文件…...

关于android中的各种尺寸与计算

--张学友《心如刀割》很好听 先说几个术语&#xff1a; Screen size(屏幕尺寸)&#xff1a; 指的是手机实际的物理尺寸&#xff0c;比如常用的2.8英寸&#xff0c;3.2英寸&#xff0c;3.5英寸&#xff0c;3.7英寸 摩托罗拉milestone手机是3.7英寸 Aspect Ratio(宽高比率)&am…...

MySQL避免索引失效的方法详细介绍

避免索引失效 在MySQL中&#xff0c;索引是帮助MySQL高效获取数据的数据结构。它就像一本书的目录&#xff0c;通过索引可以快速定位到数据的具体位置&#xff0c;从而减少对数据库的扫描量&#xff0c;提高查询速度。索引可以存储在表中的一个或多个列上&#xff0c;创建索引…...

【Java】深入了解 Java 的 charAt() 方法

我最爱的那首歌最爱的angel 我到什么时候才能遇见我的angel 我最爱的那首歌最爱的angel 我不是王子也会拥有我的angel &#x1f3b5; 张杰《云中的angel》 在 Java 编程中&#xff0c;字符串&#xff08;String&#xff09;是我们经常处理的数据类型之一。…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...