vue项目本地开发完成后部署到服务器后报404是什么原因呢?
vue路由配置:
const router = new VueRouter({
base: process.env.BASE_URL,
//hash模式下部署到服务器访问没问题，history就不行，需要在服务器上配置
mode: 'history',
routes
})vue.config.js配置:
module.exports = {
lintOnSave: false,
publicPath: process.env.VUE_APP_PATH,
// publicPath : process.env.NODE_ENV === 'production' ? './' : '/',
outputDir: 'dist',
devServer: {
disableHostCheck: true,
// overlay: { // 让浏览器 overlay 同时显示警告和错误
// warnings: true,
// errors: true
// },
https: false, // https:{type:Boolean}
open: false, //配置后自动启动浏览器
hotOnly: true, // 热更新
proxy: { //配置多个代理
"/api": {
target: "http://192.168.2.241",
changeOrigin: true,
ws: true, //websocket支持
secure: false,
},
}
},
}404报错原因：
当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网
解决办法:
nginx服务器修改
location / {
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=/$1 last;
break;
}
}一、如何部署
前后端分离开发模式下，前后端是独立部署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可
我们知道vue项目在构建后，是生成一系列的静态文件
常规部署我们只需要将这个目录上传至目标服务器即可
// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径
scp dist.zip user@host:/xx/xx/xx
让web容器跑起来，以nginx为例
server {
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
}
}
配置完成记得重启nginx
// 检查配置是否正确
nginx -t
// 平滑重启
nginx -s reload
操作完后就可以在浏览器输入域名进行访问了
当然上面只是提到最简单也是最直接的一种布署方式
什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开
二、404问题
这是一个经典的问题，相信很多同学都有遇到过，那么你知道其真正的原因吗？
我们先还原一下场景：
- vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
先定位一下，HTTP 404 错误意味着链接指向的资源不存在
问题在于为什么不存在？且为什么只有history模式下会出现这个问题？
为什么history模式下有问题
Vue是属于单页应用（single-page application）
而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
关键在这里，当我们在 website.com/login 页执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况
为什么hash模式下没有问题
router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在内 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误
那么vue-router的hash模式和histroy模式有什么区别呢？
1、hash模式url带#，histroy模式url不带#
2、hash模式解决了通过http请求来切换页面，改变路径可以直接改变页面，无需进行网络请求，这叫前端路由，在hash模式下改变的是#中的信息，
history模式，可以前进和后退，但是不能刷新页面，刷新之后就会报错。如果后端没有对路由地址进行相应的处理，那么就会报404的错。
3、hash浏览器支持率比较好，支持低版本的浏览器，但history的方法只支持部分浏览器。
解决方案
看到这里我相信大部分同学都能想到怎么解决问题了，
产生问题的本质是因为我们的路由是通过JS来执行视图切换的，
当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404
所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理
对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;
server {
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
try_files $uri $uri/ /index.html;
}
}
修改完配置文件后记得配置的更新
nginx -s reload
这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件
为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后再给出一个 404 页面
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
关于后端配置方案还有：Apache、nodejs等，思想是一致的，这里就不展开述说了
给大家分享我收集整理的各种学习资料，前端小白交流、学习交流，也可以直接问我，我会组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习-下面是学习资料参考。