Vue 项目关于在生产环境下调试

前言

开发项目时,在本地调试没问题,但是部署到生产会遇到一些很奇怪的问题,本地又没法调,就需要在生产环境/域名下进行调试。

在这里介绍一个插件Vue force dev ,浏览器扩展里下载
即便是设置了Vue.config.devtools=false 只要安装并开启了Vue Force Dev 扩展程序,devtools在生产环境都是可以被轻松打开的。

1 服务代理至本地

当我们在浏览器输入了某个域名网站后,浏览器首先会进行域名解析(也叫DNS解析),以获取对应域名的ip地址,而在系统进行dns解析之前,会首先去hosts文件中查找,在hosts文件中,如果能够找到被访问域名的ip地址,就不会再向dns服务器发起请求。



我们可以在hosts文件设置域名对应的ip, 访问域名的时候指向的是本地项目

我们拿百度举个例子

在hosts文件最后一行加上

127.0.0.1 www.baidu.com

 验证是否成功方法:在cmd中ping一下,如果不对可以电脑重启试下

vue.config文件配置

//webpack 5版本:
devServer: {port: 443,https: true,historyApiFallback: true,allowedHosts: "all"},//webpack 5以下版本:
devServer: {port: 443,https: true,disableHostCheck: true},

我这边在Edge和谷歌(Chrome)浏览器中都可以

2 env环境变量

这是常用的方法,在 Vue 项目中,我们可以使用环境变量来区分生产环境和开发环境。通过在不同环境下加载不同的配置文件或变量,可以直接切到生产环境进行调试。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/282437.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端对接 —— 周末

1.点击校验 点击校验 宇哥 记得过滤 不能校验的数据(我后端还要检验吗?) 2.前端数据对接 这个可以吗? 这种的可以吗?

工具在手,创作无忧:一键下载安装Auto CAD工具,让艺术创作更加轻松愉悦!

不要再浪费时间在网上寻找Auto CAD的安装包了!因为你所需的一切都可以在这里找到!作为全球领先的设计和绘图软件,Auto CAD为艺术家、设计师和工程师们提供了无限的创作潜力。不论是建筑设计、工业设计还是室内装饰,Auto CAD都能助…

计算机网络:网络层(无分类编址CIDR、计算题讲解)

带你快速通关期末 文章目录 前言一、无分类编址CIDR简介二、构成超网三、最长前缀匹配总结 前言 我们在前面知道了分类地址,但是分类地址又有很多缺陷: B类地址很快将分配完毕!路由表中的项目急剧增长! 一、无分类编址CIDR简介 无分类域间路由选择CI…

禁毒知识竞赛流程和规则

禁毒知识竞赛是一项全国性竞赛活动。有着深化全国青少年毒品预防教育,巩固学校毒品预防教育成果的重要作用。本文介绍一场禁毒知识竞赛的完整流程和规则,供单位组织此类活动时参考。 1、赛制 第一轮10进6,第二轮6进4,4支队伍决出…

力扣刷题-二叉树-平衡二叉树

110 平衡二叉树 给定一个二叉树,判断它是否是高度平衡的二叉树。 本题中,一棵高度平衡二叉树定义为:一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1。 示例 1: 给定二叉树 [3,9,20,null,null,15,7] 返回 true 。 给定二叉树 [1…

LearnDash LMS ProPanel在线学习系统课程创作者的分析工具

点击阅读LearnDash LMS ProPanel在线学习系统课程创作者的分析工具原文 LearnDash LMS ProPanel在线学习系统课程创作者的分析工具通过整合报告和作业管理来增强您的 LearnDash 管理体验,使您能够发送特定于课程的通信,并显示课程的实时活动&#xff01…

Cheat Enginee(CE)详细使用指南

一,下载与安装 首先在CE的官网下载Cheat Engine的软件包,下载完成之后找到文件所在的位置,进入文件运行exe文件,这样就可以进入Cheat Engine的安装界面。进入安装界面后设置好安装路径点击Next即可安装。 或者通过下载压缩包&…

进程通信知识基础【Linux】——下篇

目录 前文 一,命名管道 创建命名管道 1. getline——c库 2. unlink——系统接口 实践代码 common.hpp client.cpp server.cpp Log.cpp 二,共享内存(system V接口) 1. 创建共享内存 shmget接口 2. 删除共享内存 常见…

C++经典面试题(万字总结版)

一.编译链接运行 1. 虚拟地址空间的内存布局 Linux内存管理 | 二、虚拟地址空间布局 - 知乎 (zhihu.com) 3G的用户空间和1G的内核空间。 用户态有:代码段、数据段、堆、栈、bss段、文件映射和匿名映射区 内核态有:安全保护区、固定映射区、…

SolidWorks二次开发 C#-读取基于Excel的BOM表信息

SolidWorks二次开发 C#-读取基于Excel的BOM表信息 问题点来源解决方案及思路相关引用链接 问题点来源 这是一位粉丝问的一个问题,他说到: 老师,请问Solidworks二次开发工程图中"基于Excel的材料明细表"怎么读取里面的数据? Ps:这…

基于ssm新锐台球厅管理系统的设计与实现论文

新锐台球厅管理系统 摘要 随着信息技术在管理上越来越深入而广泛的应用,作为一般的台球厅都会跟上时代的变化,用上计算机来代表重复性的劳动,并且给用户一种新奇的感受,实现新锐台球厅管理系统 在技术上已成熟。本文介绍了新锐台…

C++:函数重载

1.函数重载概念 函数重载就是用同一个函数名定义的不同函数,当函数名和不同的参数搭配时函数的功能和含义不同。 2.实现函数重载的条件 同一个作用域,参数个数不同或者参数类型不同或者参数顺序不同(满足一个即可) void func(){} void func(int x){} v…