首页 > 系统相关 >nginx部署vue编译项目刷新页面404

nginx部署vue编译项目刷新页面404

时间:2023-12-26 16:58:15浏览次数:19  
标签:index vue 配置 404 nginx html

原因:nginx配置错误。

因为vue打包输出的是单页网页应用,只有一个index.html入口,其他路径是由前端路由去跳转的,服务器目录下没有对应物理路径,所以就会报404。

这样的nginx配置会出现该问题。

location / {
        alias  /home/vue/dist/;
        index index.html;
}

 

 

解决办法:需要配置nginx,如果找不到物理路径时,应该去哪里找。

于是将nginx配置改为如下形式,nginx -s reload配置,再刷新页面就不会出现该问题了。

location / {
        alias  /home/vue/dist/;
        index index.html;
        try_files  $uri $uri/ /index.html;
}

 

标签:index,vue,配置,404,nginx,html
From: https://www.cnblogs.com/zhaoyingjie/p/17928503.html

相关文章

  • Vue中的$refs 用法
    Vue中的$refs用法Vue中的$refs原理涉及到Vue实例的生命周期、虚拟DOM以及一些底层的JavaScript原理。Vue实例的生命周期:当Vue实例被创建时,它会经历一系列的生命周期钩子,包括beforeCreate、created、beforeMount、mounted等。在mounted生命周期钩子中,Vue实例的模板已经渲染到真实......
  • vue3学习之逻辑复用
    逻辑复用-组合式函数 src/views/ad/User.vue<scriptsetup>import{useMouse}from"../../js/mouse.js";import{useFetch}from"../../js/fetch.js";import{ref,computed}from"vue";//组合式函数const{x,y}=useMouse();/......
  • HDU 1404 ”Solitaire“ (双向广搜)
    HDU1404”Solitaire"OJ:https://acm.hdu.edu.cn/showproblem.php?pid=1401题目大意:8*8的棋盘,上面有四个棋子,棋子可以上下左右移动,如果在上下左右移动的时候该位置有一个棋子已经放置,可以跳过这个棋子放在后面,不可以连续跳过两个。给一个初始状态和一个目标状态。是否可以在......
  • 基于SpringBoot+Vue的毕业设计系统的开发设计实现(源码+lw+部署文档+讲解等)
    (文章目录)前言:heartpulse:博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌:heartpulse:......
  • Nginx反向代理MQTT服务端(emqx)
    安装Nginx此处使用Ubuntu22.04LTS系统,通过源码编译安装的方式安装Nginx。你也可以使用Docker或二进制包安装Nginx。环境要求在编译和安装Nginx前,需要确保系统中已经安装了以下依赖项:GNUC和C++编译器PCRE(PerlCompatibleRegularExpressions)库zlib压缩库OpenSSL......
  • vue3学习基础之组件
    组件Comp.vue<scriptsetup>import{ref,provide,readonly,defineAsyncComponent}from"vue";importDemoCompfrom"../../components/simple/DemoComp.vue";importErrorComponentfrom"../../components/simple/ErrorComp.vue&......
  • 2、安装nginx
    1、检查Linux内核版本uname-a内核版本为3.10.0,Linux安装需要内核版本>=2.62、安装依赖环境安装gcc如果已经安装过可以忽略yuminstallgcc安装g++如果已经安装过可以忽略yuminstallgcc-c++安装PCRE库(perlcompatibleregularexpression)如果已经安......
  • vue3学习基础之响应式状态
    响应式状态<scriptsetup>import{ref,reactive,computed,watch,watchEffect}from"vue";//reactive响应式对象只能用于对象、数组和集合类型constauthor=reactive({name:"JohnDoe",books:["Vue2-AdvancedGuide","Vue3-......
  • vue3学习基础之事件绑定
    事件绑定<scriptsetup>import{nextTick,ref}from"vue";functionclickA(){console.log("点击了a标签,点击事件传递到了外层p标签");}functionclickStop(){console.log("点击了a标签,点击事件停止向外层传递");}functionclickOnce(){console.log......
  • vue3学习基础之表单相关
    表单相关<scriptsetup>import{ref}from"vue";constmessage=ref("hello");constchecked=ref();constcheckedNames=ref([]);constpicked=ref();constselected=ref();constmulSelected=ref([]);constnum=ref(5);......