在 vue 中下载总是返回相同的 html 页面答案

【问题标题】：Download in vue always return the same html page在 vue 中下载总是返回相同的 html 页面
【发布时间】：2020-06-08 23:09:23
【问题描述】：

当我尝试在 vue 中下载带有网站的 apk 文件时，我遇到了一个奇怪的错误：

基于How to download a locally stored file in VueJS，我尝试使用以下命令下载本地文件：

<a href="../../app-debug.apk" download="client.apk">Download</a>

但是无论我在href中放什么，文件下载总是这个文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>client_web</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  <link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but client_web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

我不明白这个文件来自哪里，以及如何让我的链接下载 apk 文件。

编辑：vue.config.js

  "transpileDependencies": [
    "vuetify"
  ],
  chainWebpack: config => {
    config.module
      .rule('apk')
      .test(/\.(apk)$/)
      .use('apk-loader')
      .loader('apk-loader')
      .end();
  }
}

目录树：

│  └──views
│     └──APKDownload.vue
└──app-debug.apk```

【问题讨论】：

您是否尝试将这部分下载="client.apk" 更改为仅下载？
我试了下没有任何变化，文件下载还是一样
在您引用的链接的接受答案中，他们使用文件加载器，您在使用它吗？你能分享你的 webpack.config.js 的相关部分吗？
@Shoejep 是的，我尝试使用 apk-loader。这是我的vue.config.js：module.exports = { "transpileDependencies": [ "vuetify" ], chainWebpack: config => { config.module .rule('apk') .test(/\.(apk)$/) .use('apk-loader') .loader('apk-loader') .end(); } }

标签： javascript html vue.js

【解决方案1】：

可能有两个问题：

服务器不允许您下载“.apk”文件。
存在路径问题。检查它的最快方法是在 DevTools/Network 中，使用 ../../app-debug.apk 时使用哪个 url 下载文件。

【讨论】：

我只是尝试从 docker 在 localhost 上运行它，所以我看不到缺少什么权限。而且我确信链接很好，我尝试了其他类型的文件和其他路径，我仍然有相同的 html 文件下载。
你能给出你网页的路径吗，下载时 DevTools 中显示的是什么路径？您是否直接在浏览器中尝试过该路径？ http://localhost:3000/webpagepath/../../app-debug.apk?
当我使用路径 http://localhost:8081/client.apk/../../app-debug.apk 时，我得到了正在下载的 html 页面，但是在我的 client_web 文件夹中我有这个：├──src │ └──views │ └──APKDownload.vue └──app-debug.apk 所以 apk 文件位于 ../../app-debug.apk 来自Vue文件
这是服务器问题，与 vue 目录/文件没有直接关系。通常src 目录不允许从外部访问，因为它会危及您的安全。您尝试下载：http://localhost:8081/app-debug.apk 无法访问。将apk文件放在公共空间，或者让webpack决定：const apkPath = require('../../app-debug.apk'); export default { data() ({apkPath: apkPath});和模板<a :href="apkPath" download="client.apk">Download</a>
我认为它可以工作，现在它尝试访问文件 apk，但我得到另一个错误，他们说 apk-loader 不是 à loader。我会做更多的研究，非常感谢。