当前位置: 首页 > news >正文

Vue3路由模式为history,使用nginx部署上线后刷新404的问题

一、问题

在使用nginx部署vue3的项目后,发现正常时可以访问的,但是一旦刷新,就是出现404的情况

二、解决方法

1.vite.config.js配置

在vite.config.js中加入以下配置

export default defineConfig(({ mode }) => {const isProduction = mode === 'production'return {base: isProduction ? '/' : '/',build: {chunkSizeWarningLimit: 1000,outDir: 'dist',assetsDir: 'assets',sourcemap: true,terserOptions: {compress: {drop_console: true,drop_debugger: true}},assetsPublicPath: './'}}
})

2.vue route

在vue route配置中加入以下配置

const router = createRouter({history: createWebHistory('/'),base: '/',
})

3.配置nginx.conf

在nginx.conf中加入以下配置

server {listen       8080;server_name  localhost;location / {root   html;index  index.html;try_files  $uri $uri/ @router; }location @router { rewrite ^.&$ /index.html last;}error_page 404 /index.html;
}

做完以上配置,重新build,重启nginx,即可解决

http://www.dtcms.com/a/175422.html

相关文章:

  • Leetcode - 周赛448
  • PostgreSQL数据库的array类型
  • 密码工具类-生成随机密码校验密码强度是否满足要求
  • GPS定位方案
  • 使用阿里AI的API接口实现图片内容提取功能
  • three.js通过GEO数据生成3D地图
  • 2025年5月HCIP题库(带解析)
  • 基于计算机视觉的试卷答题区表格识别与提取技术
  • js var a=如果ForRemove=true,是“normal“,否则为“bold“
  • 网页版部署MySQL + Qwen3-0.5B + Flask + Dify 工作流部署指南
  • 自定义SpringBoot Starter-笔记
  • 当K8S容器没有bash时高阶排查手段
  • Github上如何准确地搜索开源项目
  • (二)毛子整洁架构(CQRS/Dapper/DomianEvent Handler)
  • 8.软考高项(信息系统项目管理师)-沟通管理
  • 作为主动唤醒的节点,ECU上电如何请求通讯
  • String、StringBuilder、StringBuffer的区别
  • 翻转二叉树(简单)
  • 使用原生javascript手动实现一个可选链运算符
  • 牛客——暴力、技巧、字符与数组的使用(强强联合、字符数量)
  • 【工具】解析URL获取实际图片地址下载原始FFHQ图像
  • C++:实现线程池
  • VMware中虚拟机和主机的SSH远程连接
  • langchain使用推理模型如DeepSeek,删除回答中的推理过程<think></think>
  • 数据库实验10 函数存储
  • vitepress 复杂环境引入 mermaid
  • Python技巧:TX串口输入十六进制字符串,并获取输出,RX获取输出;循环1000次,通过分析RX输出,计算丢包率。
  • 使用docker配置Mysql
  • 深度学习:图神经网络GNN、GCN及其在推荐系统的应用
  • 人工智能 计算智能领域中分布估计算法的核心思想