一、如何部署
前后端分离开发模式下,前后端是独立布署的
我们知道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问题
}
}
这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。
- 第三步,访问 localhost:9000/zxy