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

前言

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

在这里介绍一个插件Vue force dev ,浏览器扩展里下载

即便是设置了Vue.config.devtools=false 只要安装并开启了Vue Force Dev 扩展程序,devtools在生产环境都是可以被轻松打开的。

1 服务代理至本地

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

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

我们拿百度举个例子

在hosts文件最后一行加上

bash 复制代码
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 项目中,我们可以使用环境变量来区分生产环境和开发环境。通过在不同环境下加载不同的配置文件或变量,可以直接切到生产环境进行调试。

相关推荐
哆啦A梦158811 分钟前
uniapp分包实现
前端·vue.js·uni-app·vue3
wordbaby16 分钟前
Hooks的革命:让React的非UI逻辑也能像UI组件一样自由复用和组合
前端·react.js
flower_tomb32 分钟前
对浏览器事件机制的理解
前端·javascript·vue.js
用户4582031531733 分钟前
使用Trae做一个简单的天狗食日动画效果试试
前端·trae
普通码农35 分钟前
Vue Element Plus X 部署后资源加载失败问题
前端
超人不会飛36 分钟前
仿豆包 H5应用核心模板:用Vue快速复刻大模型对话体验
前端·javascript·vue.js
程序张40 分钟前
Vue3+Vite 现代化前端框架👊打破 Chrome 83 内核限制
前端·javascript·vue.js
拜无忧41 分钟前
【教程】Vue中级转React终极指南-理解Vue和React的差异
前端·vue.js·react.js
web前端12343 分钟前
Android开发四大组件详解
前端
木辰風43 分钟前
idea npm install 很慢(nodejs)
前端·npm·node.js