排查vue线上才会出现的故障、线上源码调试

一、问题

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

二、思路

因为项目代码打包部署线上的是压缩代码，在浏览器上不能调试源码，所以将项目打包在本地调试：
1.设置本地vue项目打包时不压缩代码；
2.本地安装nginx，将打包的项目部署nginx，并代理请求；
3.访问nginx服务器并调试

三、具体实现

1.修改项目打包配置：设置打包不压缩（小编项目为vite项目）
修改 vite.config.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常用命令

// 重启配置： nginx -s reload
// 启动：start nginx
// 关闭：nginx -s stop
// 检查一下配置文件是否正确，successful就说明正确了：
// nginx -t -c /nginx-1.25.4/conf/nginx.conf

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

location / {
    root   html/reseller;
    #index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

3.访问nginx服务器并调试
可以源码调试找出线上问题了！！！