vue项目中把文件放到静态资源中，a标签做下载功能路径出错的根本原因

目录

一、功能场景

 二、原因

三、 解决

四、总结

webpack打包public里面的文件（pdf、exel、word、favicon.png、html、txt等）和assets里面的文件（被web页面引用的图片、音频、css文件等）的不同

---

一、功能场景

【1】需求是做一个下载Exel模板的共能：

         原先我是把Exel模板放在src下专门放静态资源(图片、css文件、json文件、xml文件)的assets文件夹里面，在利用a标签写入文件的相对路以达到点击标签下载Exel模板的目的。

【2】结果

         下载文件的时候，拼接出来的路径找不到对应的文件：

 二、原因

webpack在对assets文件进行打包的时候就会把该文件作为一个模块打包到一个js文件夹里面，通俗的讲：就是文件格式发生了改变。所以我觉得它可能就是专门放用来展示在页面的静态资源，而下载下来的文件是来使用的资源。

webpack打包assets文件具体可参考：

webpack4.0各个击破—— Assets - 知乎

三、 解决

【1】方法：

        把Exel模板放到public文件夹中，再用a标签链接到public所在的相对路径：如 href=“./XXXXX.xlsx”。

【2】原理：

       public文件夹和assets文件夹一样都是放静态文件的。而不同的是，在webpack打包项目的时候，会原封不动地对public进行打包：而assets文件夹经过webpack打包之后，会变成base64或者fallback格式但是可以被浏览器解析展示在web页面上的东西。

四、总结

webpack打包public里面的文件（pdf、exel、word、favicon.png、html、txt等）和assets里面的文件（被web页面引用的图片、音频、css文件、json、xml文件等）的不同

【1】public被webpack打包，不变，一开始是什么样子，组后还是什么样子

【2】assets被webpack打包，会变成base64或者fallbac格式的文件