Vue2实现点击<a>标签下载最新版本exe文件的方法

下面提供几种可行的实现方式，按推荐程度排序：

方案一：后端接口返回最新版本文件名（推荐） #

通过后端接口遍历服务器上的EXE文件，自动识别并返回版本号最高的文件名，前端只需请求该接口获取最新下载链接。

前端Vue组件修改（Home.vue） #

<template>
    ...
    <a :href="downloadLink" download>
        Latest Version Download
    </a>
    ...
</template>
<script>
export default {
    name: 'Home',
    data() {
        return {
            downloadLink: ''
        }
    },
    mounted() {
        // 请求后端接口获取最新文件名
        fetch('/api/get-latest-exe')
            .then(res => res.text())
            .then(filename => {
                this.downloadLink = filename;
            })
            .catch(() => {
                // 接口异常时降级到默认版本
                this.downloadLink = 'Program_v1.11.0.exe';
            });
    }
    ...
}
</script>

后端示例（Node.js + Express） #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 定义接口返回最新EXE文件名
app.get('/api/get-latest-exe', (req, res) => {
    const rootDir = __dirname; // 对应服务器根目录
    fs.readdir(rootDir, (err, files) => {
        if (err) {
            return res.status(500).send('Program_v1.11.0.exe');
        }

        // 筛选符合命名规则的EXE文件
        const exeFiles = files.filter(file => 
            file.startsWith('Program_v') && file.endsWith('.exe')
        );

        if (!exeFiles.length) {
            return res.send('Program_v1.11.0.exe');
        }

        // 按版本号降序排序，取第一个即为最新版本
        const latestFile = exeFiles.sort((a, b) => {
            const parseVersion = name => name.replace(/Program_v|\.exe/g, '').split('.').map(Number);
            const vA = parseVersion(a);
            const vB = parseVersion(b);

            for (let i = 0; i < Math.max(vA.length, vB.length); i++) {
                const numA = vA[i] || 0;
                const numB = vB[i] || 0;
                if (numA !== numB) return numB - numA;
            }
            return 0;
        })[0];

        res.send(latestFile);
    });
});

app.listen(3000);

方案二：静态配置文件维护最新版本 #

如果没有后端开发能力，可以在服务器根目录放置一个静态JSON文件，手动更新最新版本的文件名，前端请求该文件获取下载链接。

步骤1：创建静态配置文件 #

在服务器根目录新建latest-version.json，内容如下：

{"filename": "Program_v1.11.0.exe"}

每次更新EXE版本时，修改该文件中的filename值即可。

步骤2：Vue组件修改 #

<template>
    ...
    <a :href="downloadLink" download>
        Latest Version Download
    </a>
    ...
</template>
<script>
export default {
    name: 'Home',
    data() {
        return {
            downloadLink: ''
        }
    },
    mounted() {
        fetch('/latest-version.json')
            .then(res => res.json())
            .then(data => {
                this.downloadLink = data.filename;
            })
            .catch(() => {
                this.downloadLink = 'Program_v1.11.0.exe';
            });
    }
    ...
}
</script>

方案三：前端直接解析服务器目录（不推荐） #

通过配置服务器开启目录浏览功能，前端请求根目录后解析HTML中的文件列表，筛选并比较版本号。此方法存在安全风险，不建议生产环境使用。

前提条件 #

配置服务器开启目录浏览（例如Nginx添加autoindex on;指令）。

Vue组件修改 #

<template>
    ...
    <a :href="downloadLink" download>
        Latest Version Download
    </a>
    ...
</template>
<script>
export default {
    name: 'Home',
    data() {
        return {
            downloadLink: ''
        }
    },
    mounted() {
        fetch('/')
            .then(res => res.text())
            .then(html => {
                // 正则匹配所有符合规则的EXE文件名
                const exeFiles = html.match(/Program_v\d+\.\d+\.\d+\.exe/g) || [];
                if (exeFiles.length) {
                    // 排序获取最新版本
                    const latestFile = exeFiles.sort((a, b) => {
                        const parseVersion = name => name.replace(/Program_v|\.exe/g, '').split('.').map(Number);
                        const vA = parseVersion(a);
                        const vB = parseVersion(b);

                        for (let i = 0; i < Math.max(vA.length, vB.length); i++) {
                            const numA = vA[i] || 0;
                            const numB = vB[i] || 0;
                            if (numA !== numB) return numB - numA;
                        }
                        return 0;
                    })[0];
                    this.downloadLink = latestFile;
                } else {
                    this.downloadLink = 'Program_v1.11.0.exe';
                }
            })
            .catch(() => {
                this.downloadLink = 'Program_v1.11.0.exe';
            });
    }
    ...
}
</script>

内容的提问来源于stack exchange，提问作者refresh