您现在的位置是:首页 > 正文

服务器配置vue项目的默认路由,Vue-Router项目设置Nginx伪静态

2024-04-01 01:10:42阅读 1

Vue-Router项目设置Nginx伪静态

使用Vue + Vue-Router的项目,在history模式下,出现了刷新页面404的问题, 服务器为Nginx

出现刷新404的原因是Vue-Router定义的路由并没有真实的存在于服务器上, Nginx试图接管路由并按照路由地址寻找资源失败。

如: www.wddsss.com/src/a.png路由

当直接访问上链接时, Nginx会从server_name 为www.wddsss.com的路由配置的网站根目录下寻找资源, 也就是dist目录下去寻找 src/a.png;

// nginx的配置

server {

server_name www.wddsss.com;

root /www/project/blog/dist;

index index.php index.html;

}

如果dist目录下没有a.png的资源,服务器就会返回一个404的错误。

同理,我们在Vue-Router中定义的都是前端路由,服务器上没有真实的地址,所以解决404的方案是,如果nginx找不到资源,就返回项目的入口文index.html, 将路由让给前端来处理。

为了实现上述功能, 我们需要配置Nginx伪静态

一般来说,Nginx 配置如上,这就会出现Nginx去访问前端路由而出现了404的问题, 解决方案是配置Nginx的伪静态。

配置Nginx伪静态(try_files方式)

vim /etc/nginx/conf.d/xxx.conf;

server {

// 域名

server_name www.wddsss.com;

// 项目入口文件目录地址 保证有权限

root /www/project/blog/dist;

index index.php index.html;

// 配置伪静态

location / {

try_files $uri $uri/ /index.html;

}

}

重启配置

nginx -s reload

注意项目目录的用户必须是nginx, 且有读写权限。

现在的Nginx配置已经不会再返回404页面了, 因为我们默认返回了index.html文件, 那么如果用户访问的不是服务器的资源, 同时也不是前端路由,那么我们理当返回一个404的页面给用户展示, 这部分工作现在已经落在了前端上完成, Vue-Router中配置如下

const router = new VueRouter({

mode: 'history',

routes: [

...

{ path: '*', component: NotFoundComponent }

]

})

网站文章

  • ant之build.xml详解

    ant之build.xml详解

    用 Ant 编译 Java 程序,同时产生 javadoc,生成一个 Jar 或 W ar 文件,实现文件的副本

    2024-04-01 01:10:37
  • 跨考计算机还是法硕,2021考研:过来人告诉你法硕如何选择院校?

    近年来,法律硕士一直是备受考研人的青睐,考研择校就是决定你命运的关键一步,小编建议大家在报考法硕前,要先了解法律硕士考研怎么选择院校?一、地理位置有些同学在择校的时候已经考虑到以后工作的问题,因为法硕...

    2024-04-01 01:10:30
  • exe4j将jar文件和jre文件打包成exe

    exe4j将jar文件和jre文件打包成exe

    转载:http://xiejianglei163.blog.163.com/blog/static/124727620138931213864/ Exe4j把jar打成exe 运行exe4j的程序在bin\exe4j.exe 1、welcome界面 2、选择jar in exe mode 3、 (1):application name : ...

    2024-04-01 01:10:06
  • springboot控制器通知处理异常

    springboot中通过控制器通知统一的来实现异常处理 自定义异常 package com.example.springboot.exception; public class NotFoundException extends RuntimeException{ private static final long serialVersionUID = 1L; priv...

    2024-04-01 01:09:59
  • 1.15 什么是后端服务

    1.15 什么是后端服务

    后端服务(Backend Service)是指在软件应用中负责处理数据、逻辑和业务功能的组件或模块。它通常运行在服务器端,为前端应用或客户端提供数据和服务支持。

    2024-04-01 01:09:28
  • 为啥计算机课要带u盘,计算机使用技巧,3步教你怎么在电脑里禁止U盘的安装使用...

    为啥计算机课要带u盘,计算机使用技巧,3步教你怎么在电脑里禁止U盘的安装使用...

    去过网吧的人或者都会知道,有时候在电脑上插入U盘的时候会被系统拒绝,这是怎么做到的呢?如果不懂设置的朋友们肯定会觉得很高大上,也会感叹网吧管理员非常的专业,这样的设置也可以搞的出来,真的是佩服。本文将...

    2024-04-01 01:09:00
  • 【从零写javaweb框架】(八)请求转发器

    上一篇我们实现了把ClassHelper/BeanHelper/IocHelper/ControllerHelper在项目启动时加载进来。【从零写javaweb框架】(七)初始化框架 现在开始写请求转发器,请求转发器是MVC的核心:需要编写一个servlet,让它来处理所有的请求。 从HttpServletRequest对象中获取请求方法与请求路径,通过ControllerHelper.get

    2024-04-01 01:08:33
  • 获取本地照片和拍照上传并裁剪的实现

    // 获取照片方法public void showPhtoes() { String[] s = { "照相", "从照册取出", "取消" }; Builder builder = new Builder(this); builder.setItems(s, new DialogInterface.OnClickListener() { @Override public void

    2024-04-01 01:08:25
  • Vue+Leaflet:让marker(小车)在地图上动起来

    vue+leaflet,动态marker

    2024-04-01 01:08:18
  • windwos10上安装tomcat(详细步骤).............

    windwos10上安装tomcat(详细步骤).............

    一、下载tomcat用浏览器打开tomcat官网:http://tomcat.apache.org/在左侧的导航栏Download下方选择最新的Tomcat 9,点击页面下方的“ 64-bit Windows zip (pgp, md5, sha1)“进行下下载完成二、安装tomcat解压后即可使用三、配置环境变量配置jdk的环境变量(略) 在系统变量里新...

    2024-04-01 01:08:10