其他分享
首页 > 其他分享> > Vue CLI4文件本地下载与public文件夹资源引用的坑

Vue CLI4文件本地下载与public文件夹资源引用的坑

作者:互联网

一、前言

前端小白,只是费了好大力气找到了解决问题的办法,但并不了解背后的原因,考虑到各方面的因素,将开发环境配置发在下边,同时也欢迎前端大佬们对文章中的情况答疑解惑,小白感激不尽!

开发环境:

npm  6.14.8

node  14.15.0

vue-cli  4.5.9

vue-admin-template  4.4.0

我只修改了vue-admin-template的路由配置,并且添加了些页面以及请求api等,其他系统性配置的东西均未修改。

文件目录及结构如下:

addSubject.vue中下载本地文件demo.xlsx,以及引入图片01.jpg

二、文件本地下载

错误做法:

<a href="/public/demo.xlsx" download>下载模板</a>

正确做法:

<a href="demo.xlsx" download>下载模板</a>
<a href="./demo.xlsx" download>下载模板</a>
<a href="/demo.xlsx" download>下载模板</a>

奇怪的是在vue-cli2中如果把public换成static(vue-cli3之后目录结构有所改变,public等同于static文件夹),第一种做法是正确的,但是在vue-cli4中就会出现如下图的错误

猜测:vue-cli4中引用public文件时,“/”是以public文件夹内部为根目录开始找的。

三、public文件夹资源引用问题

错误做法:

<!--  编译不通过,直接报错  -->
<img src="./01.jpg"/>
<!--  编译通过,但无法正常显示图片  -->
<img src="/public/01.jpg"/>

正确做法:

<img src="01.jpg"/>
<img src="/01.jpg"/>

疑惑:01.jpg就可以为什么./01.jpg就不可以呢?

四、参考博文

vue-cli 3 /4 图片在public 文件夹中图片路径问题

vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑(实测有效)

标签:CLI4,Vue,01,vue,文件夹,下载,本地下载,public,模板
来源: https://www.cnblogs.com/liuguo/p/14455024.html