概述

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

访问二级页面404

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

location / {
    try_files $uri $uri/ @router;
    index index.html;
}
location @router {
    rewrite ^.*$ /index.html last;
}

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

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

下载文件无法立即触发

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

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里面传过去。如下：

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>。

在 Electron 中引入 Vuetify 无法显示。

只要在渲染进程中执行 Vue.use(Vuetify)， 则报错为 [Vuetify] Multiple instances of Vue detected。
具体解决办法为：确保Vue和Vuetify在webpack中以相同的方式处理externals，例如将两个（或两者都没有）let whiteListedModules = ['vue', 'vuetify']放在这些vuetify webpack构建中的行中。