Vue 开发遇到的坑

概述

使用JavaScript全栈开发一个系统。遇到的一些坑记录一下。

访问二级页面404

开发环境的时候打开一个二级页面http://localhost:8090/logs/logs-upload一切正常,但是使用域名部署之后,打开二级页面http://ops.luchenqun.com/logs/logs-upload。出现404。原因是刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。解决方法,更新nginx配置如下:

1
2
3
4
5
6
7
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}

使用 XMLHttpRequest 无法获取上传文件进度

具体表现能上传成功,但是上传进度的回调一直没调用到。后面发现因为使用了Mockjs,对实例化的 XMLHttpRequest 进行了拦截。注释掉 Mockjs 相关代码即可。

下载文件无法立即触发

因为我要对下载的进行人身份进行验证,使用axios进行下载,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
this.$http({
method: 'get',
url: `/api/file/${file.id}`,
responseType: 'blob',
headers: { Authorization: `Bearer ${this.$store.getters.token}` }
}).then((res) => {
let url = window.URL.createObjectURL(res.data);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', file.uploadName);
document.body.appendChild(link);
link.click();
this.$toastr(`下载文件 ${file.uploadName} 成功`, 'success')
}).catch((error) => {
this.$toastr(`下载文件 ${file.uploadName} 失败。文件不存在或者您没有权限下载`)
})

但是有个问题是,他需要下载完成之后,才能触发创建文件,这样给用户很不友好。尤其文件比较大的时候。后面我改成直接开一个新链接,将token在url里面传过去。如下:

1
2
let url = `http://ops.luchenqun.com/api/file/${file.id}?token=Bearer ${this.token}`
window.open(url, 'downloadIframe');

downloadIframe 是 HTML 里面的元素。<iframe name="downloadIframe" style="display:none"></iframe>

您的支持将鼓励我继续创作!
0%