出现问题:
在使用history模式的时候,由于浏览器路径与后端路径类似,所以当刷新页面的时候,浏览器还是会向服务器发送请求,但是由于服务器并没有对应的路由页面,所以会导致404空白
解决方案:
在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。同时这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现后退。
- node服务器
简单粗暴的一种方法,如果没有读取到静态资源就直接返回html页面,可以用于前端调试
const http = require('http');
const fs = require('fs');
http.createServer((req,res) => {
fs.readFile(__dirname + req.url, (err, data) => {
if(!err) {
res.end(data);
}else {
fs.readFile('index.html', (e, html) => {
if(!e) {
res.end(html);
}
})
}
})
}).listen(8080, err => {
!err&&(console.log('http://localhost:8080')
})
- nginx静态服务器
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
在nginx
安装目录下,将打包后的文件放置在安装目录下的 html
目录中,接着打开conf
目录中的nginx.conf
文件,修改server
部分如上,然后在nginx
根目录使用nginx -t
测试配置文件修改后的语法是否正确(如果有问题会报错),如果没有错误的话,使用命令nginx -s reload
命令重启让配置文件生效,打开浏览器,输入localhost
即可看到项目部署完成
同时运行多个程序时,80端口被占用时
server {
listen 8000;
server_name localhost;
location / {
root html/project;
index index.html;
try_files $uri $uri/ /index.html;
}
}
在html目录下新建文件夹,例如project
,将打包后的文件放置在project
文件夹下,在conf/nginx.conf
文件中,原80端口的下方新加入上述代码,接着重复nginx -t
与nginx -s reload
再次打开浏览器,输入localhost:8000
就可以看到项目部署完成