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

没有鸡汤吃不下饭2025-07-30 12:08

一、问题

在前端日常开发中偶尔会出现本地调试没有问题，但是部署到线上（测试、正式环境）就会出现一些莫名的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服务器并调试

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