排查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服务器并调试

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

相关推荐
Justin_191 小时前
Galera Cluster部署
linux·服务器·nginx
麦麦大数据2 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区3 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗3 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长4 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅5 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_5 小时前
Chrome开发者工具
前端·chrome
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
程琬清君5 小时前
vue3 confirm倒计时
前端·1024程序员节