vue项目如何部署？history与hash模式部署时的区别

在这里插入图片描述

一、如何部署

前后端分离开发模式下，前后端是独立布署的

我们知道vue项目在构建后，是生成一系列的静态文件

前端只需要将其上传至目标服务器的web服务指定的静态目录下即可

二、404问题

我们先还原一下场景：

vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
先定位一下，HTTP 404 错误意味着链接指向的资源不存在

问题在于为什么不存在？且为什么只有history模式下会出现这个问题？

1、为什么history模式下有问题

Vue是属于单页应用（SPA）

而SPA是一种网络应用程序，所有与用户交互都是通过动态重写当前页面来实现页面变化的，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html

现在，我们回头来看一下我们的nginx配置：

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
  }
}

可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，
这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login，

关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有相关/login配置的，所以就会出现 404 的情况

2、为什么hash模式下没有问题

router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新向服务端发送请求。而改变hash，在hash模式中会被hashChange方法所捕获，在vue中会触发页面的修改。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中，因此对于服务端来说，即使没有配置location，也不会返回404错误

3、解决方案

产生问题的本质是因为我们的路由是通过JS来执行视图切换的，

当我们进入到子路由时刷新页面，在history模式下web服务器没有相对应的页面此时会出现404

所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理

3.1、前端配制

const router = new VueRouter({
// 定义为history模式
  mode: 'history',   
// 如果包并非部署在指定服务的根目录下，则需要添加服务根目录到index.html的路径；
  base:'/zxy/',    
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

针对base的举例说明

3.2、服务端配制

第一步，判断对nginx配置文件.conf如何修改，

如果服务部署在根目录上，则添加try_files $uri $uri/ /index.html;
如果服务部署不在根目录上，则需要指定相应的从根目录开始的路径，例如：我的nginx中此服务的根目录是webapp目录，而我将文件放在zxy目录下，所以添加配制如下try_files $uri $uri/ /zxy/index.html

在这里插入图片描述

第二步，具体nginx.conf配制修改如下

server {
        listen       9000;
        server_name  localhost;
        location / {
            root   webapp;
            index  index.html index.htm;
        }  
		
		# 这个是新增的配制
		location /zxy {
			root webapp;
			index  index.html index.htm;
			try_files $uri $uri/ /zxy/index.html;  #针对history模式，刷新出现404问题
			
		}

        	
    }