vue3+vue-router4 路由HTML5模式(createWebHistory ),编译后部署到nginx,点击路由跳转正常,但是刷新页面报404

javascript 复制代码
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/index/home',
      component: () => import('../views/index/Home.vue'),
    },
    {
      path: '/home',
      component: () => import('../views/home/Index.vue'),
    },
    {
      path: '/me',
      component: () => import('../views/me/Index.vue'),
    },
  ],
})

router.beforeEach((to, from) => {
  return true
})

export default router

不兼容:

bash 复制代码
    server {
        listen 80;
        server_name localhost chat.test.com;

        #配置根目录
        location / {
            root    /temp/test;
            index  index.html index.htm;
            add_header Content-Security-Policy upgrade-insecure-requests;
        }
    }  

解决方案:

bash 复制代码
    server {
        listen 80;
        server_name localhost chat.test.com;

        #配置根目录
        location / {
            root    /temp/test;
            #index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            add_header Content-Security-Policy upgrade-insecure-requests;
        }
    }  

参考链接

https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx

人工智能学习网站

https://chat.xutongbao.top

相关推荐
北城笑笑5 分钟前
Server 13 ,CentOS 上使用 Nginx 部署多个前端项目完整指南( 支持多端口与脚本自动化 )
linux·服务器·前端·nginx·centos
Java陈序员6 分钟前
听歌体验直接拉满!推荐一款高颜值音乐播放器!
vue.js·docker·vite
艾小码10 分钟前
还在重复造轮子?3个Vue3组合函数让你开发效率翻倍!
前端·javascript·vue.js
我是日安13 分钟前
从零到一打造 Vue3 响应式系统 Day 3 - 订阅者模式:响应式设计基础
前端·vue.js
拜无忧13 分钟前
【知识点】vue3不常用api总结-针对前端中级-进阶
前端·vue.js·性能优化
muchu_CSDN35 分钟前
谷粒商城项目-P16快速开发-人人开源搭建后台管理系统
前端·javascript·vue.js
叫我詹躲躲1 小时前
前端竟能做出这种专业医疗工具?DICOM Viewer 医学影像查看器
前端·javascript·vue.js
猿如意1 小时前
vue项目的main.js规划设计与合理使用
前端·javascript·vue.js
F2E_zeke1 小时前
使用electron将vue3网页项目包装成pc客户端
javascript·vue.js·electron
鹏多多1 小时前
Vue移动端开发的适配方案与性能优化技巧
前端·javascript·vue.js