vue2 下载前端静态文件

一、文件存放位置

因为webpack打包时，与src同级的static文件夹里的内容不会被打包，所以存放在与src同级的static文件夹中

二、 文件前缀与路径

1、前缀

是vue.config.js中devSever 的assetsPublicPath 值，我的项目生产环境和开发环境对应的assetsPublicPath值分别是  ./ 和 /groupPage

2、路径

存放打包内容的文件夹内容如下

 要静态下载的文件就在static文件夹里，单页面复应用模式下，所有页面都呈现在index.html里，所以路径是 前缀 + /static/AssembleProductImportTemplate.xlsx（不同环境前缀不同，所以不同环境路径也不同，路径值在下方代码中）三、代码

<template>
    <div>
        <!-- href：文件路径 download：文件名 -->
        <a :href="href" download="vue2下载前端静态文件示例">下载</a>
    </div>
</template>
<script>
export default {
    computed: {
        href () {
            return {
                href: process.env.NODE_ENV === 'production'?'./static/AssembleProductImportTemplate.xlsx': '/groupPage/static/AssembleProductImportTemplate.xlsx';
            }
        }
    }
}
</script>