排查vue项目线上才会出现的故障

一、问题

在前端日常开发中偶尔会出现本地调试没有问题,但是部署到线上(测试、正式环境)就会出现一些莫名的bug,在本地无法复现和调试。

二、思路

因为项目代码部署线上之后再浏览器上不能调试源码,所以将项目打包在本地调试:

1.设置本地vue项目打包时不压缩代码;

2.本地安装nginx,将打包的项目部署nginx,并代理请求;

3.访问nginx服务器并调试

三、具体实现

1.修改项目打包配置:设置打包不压缩(小编项目为vite项目)

修改 vite.config.js 文件

js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: false, // 禁用压缩(包括JS和CSS)
    sourcemap: true, // 生成 sourcemap 文件
  }
})

2.安装nginx,部署本地项目,并代理请求

a.下载nginx nginx.org/

b.nginx常用命令

js 复制代码
// 重启配置: nginx -s reload
// 启动:start nginx
// 关闭:nginx -s stop
// 检查一下配置文件是否正确,successful就说明正确了:
// nginx -t -c /nginx-1.25.4/conf/nginx.conf

c.nginx部署vue项目后刷新页面404,重定向不生效问题解决:

js 复制代码
location / {
    root   html/reseller;
    #index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

3.访问nginx服务器并调试

可以源码调试找出线上问题了!!!

相关推荐
ObjectX前端实验室5 分钟前
【图形编辑器架构】渲染层篇 — 从 React 到 Canvas 的声明式渲染实现
前端·计算机图形学·图形学
java水泥工14 分钟前
基于Echarts+HTML5可视化数据大屏展示-智慧消防大屏
前端·echarts·html5
杨超越luckly17 分钟前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据
ObjectX前端实验室37 分钟前
【图形编辑器架构】节点树篇 — 从零构建你的编辑器数据中枢
前端·计算机图形学·图形学
ikun778g1 小时前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
IT_陈寒1 小时前
React Hooks 实战:这5个自定义Hook让我开发效率提升了40%
前端·人工智能·后端
三月的一天1 小时前
React单位转换系统:设计灵活的单位系统与单位系统转换方案
前端·javascript·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan20152 小时前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立2 小时前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js