Vue如何下载本地静态资源static文件夹

目录
  • 下载本地静态资源static文件夹
    • 下载静态文件方法
    • 下载
  • 下载本地static静态文件的踩坑

下载本地静态资源static文件夹

下载静态文件方法

 <a href="/static/serviceAgreement.docx" rel="external nofollow"  rel="external nofollow"  download="下载"></a>

下载

项目需要下载本地的docx文档，文档是放在本地的没有在服务器，所以需要下载本地静态资源文件，开始把文件放在了这里src目录下的assets资源文件下

下载报错 找不到文件路径查找原因是因为项目用的是vue-cli3, 在打包的时候并不知道会把assets

下的文件打包在哪里，但是在build的时候发现在根目录下的文件是打包在当前路径下的

所以我们要把需要下载的静态资源放在public文件夹下的static文件夹下就可以了

你可能在输入路径的时候会提示你是src,而不直接是static,但是你还是要直接输入static这个路径

<a href="/static/serviceAgreement.docx" rel="external nofollow"  rel="external nofollow"  download="服务协议"></a>

需要注意的是：cli2需要把要下载的文件放在static下面；cli4需要将文件放在public里面才不会被打包。

注意：href 指向项目中pdf文件的路径（不要出现中文），download 就是重命名的文件名，不设置的话就是默认文件名

发现vue版本是 3.0+ 所有把要下载的 文件直接放到public文件夹中（最好英文名字）

下载本地static静态文件的踩坑

接手了一个别人做的官网项目，里面添加一些功能，国际化（国际化）；接着有一个下载的功能，一般都是后端甩一个链接你放上面就好，但是这个小功能再去找一个后端搞，太夸张了吧，那我们就自己搞！

方法当然是非常多的，但是我试了几种，总是会报一个错误；“未发现文件”，还有的时候就是：房子同一个地址下面；非压缩包的文件可以正常下载，但是压缩包就不能下载；

上代码

最简单的就是利用a标签

<el-button round
><a href="/xlsx/test.xlsx" rel="external nofollow"  download="大赛报名表.xlsx"
  >报名参赛</a
></el-button>

会有人疑问路径是不是不对，

一般访问static里面的文件路径是："…/…/static/zip/test.xlsx"

我开始也是这样写的，一直报错”未找到文件“，

后来看了cli版本，发现是cli4有一些变化，改成代码中的路径就可以了；

还有一个问题就是相同路径，普通文件可以下载，但是压缩包无法下载，（我试验过把压缩包和普通文件放到同一个路路径下依然有问题）；

这个时候我们就不要在html里面去操作他了；给他一个点击事件

上代码

html

<el-button @click="download">
题目下载
</el-button>

script

methods: {
    download() {
      window.location.href = "/zip/subject.zip";
    },
  },

两个文件的路径

做一下记录，以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue打包静态资源后显示空白及static文件路径报错的解决

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • 浅谈Vue static 静态资源路径 和 style问题

    我就废话不多说了,大家还是直接看代码吧~ // Paths assetsRoot: path.resolve(__dirname, '../dist'), // 静态资源输出到二级目录下 assetsSubDirectory: 'static', // 静态资源cdn地址 assetsPublicPath: '/', 引用的时候可直接,不用返回上一级去查找,因为编译输出后的 static 下的资源 跟 html 是在同一个目录 <img class="navbar-brand-logo&q

  • 浅谈vue引用静态资源需要注意的事项

    项目结构如下: 想在icon.styl文件夹里面引用字体图标,使用相对路径,但是报错 浏览器报错如下: 解决方案有两种: 方案1.使用根目录路径 方案2:将要引用的静态资源fonts文件夹放在static文件夹下 icon.styl文件下面的代码如下: 问题就解决了. 建议:静态资源统一管理在static文件夹下. 以上这篇浅谈vue引用静态资源需要注意的事项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue如何下载本地静态资源static文件夹

    Vue如何下载本地静态资源static文件夹

    目录 下载本地静态资源static文件夹 下载静态文件方法 下载 下载本地static静态文件的踩坑 下载本地静态资源static文件夹 下载静态文件方法 <a href="/static/serviceAgreement.docx" rel="external nofollow" rel="external nofollow" download="下载"></a> 下载 项目需要下载本地的docx文档

  • 如何配置vue.config.js 处理static文件夹下的静态文件

    最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到

  • Vue打包后访问静态资源路径问题

    Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run build 后会生成dist文件夹,把里面的index.html在浏览器运行会发现 图片路径出错啦!!! 解决方法: 1.先找到config下的index.js文件 把最后的'/' 改为 './' 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点,感谢大家的阅读和对我们的支持.

  • Vue中img的src属性绑定与static文件夹实例

    Vue中img的src属性绑定与static文件夹实例

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl }}"/> 这样写肯定是不对的,正确的写法应该使用v-bind: <img v-bind:src="imgUrl"/> 不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径. 例如,有下面一个文件结构: 现在,我们要在A

  • Mac环境Nginx配置和访问本地静态资源的实现

    本地开发有时候需要调试静态文件资源,无法直接访问,可以通过配置本地Nginx服务的方式来进行,顺便记录一下Nginx的配置步骤 安装 <!--通过 Brew 安装: --> brew install nginx <!--启动: --> brew services start nginx <!--查看配置: --> cat usr/local/etc/nginx/nginx.conf <!--编辑配置: --> vi usr/local/etc/nginx/n

  • linux服务器上使用nginx访问本地静态资源的方法

    1.查看80端口是否被占用,一般80端口多被apache服务占用. netstat -anp|grep 80 2.修改apache服务的端口号 vim /etc/apache2/ports.conf 3.将端口号修改为8080 4.修改nginx服务配置 vim /etc/nginx/conf.d/nginx.conf 5.重启nginx服务 service nginx restart 6.页面尝试访问本地资源 7.访问成功! 总结 以上所述是小编给大家介绍的linux服务器上使用nginx访问

  • vue中如何给静态资源增加路由前缀

    目录 vue给静态资源增加路由前缀 说说vue中的~(静态资源处理) Webpacked 资源 资源处理规则 总结 vue给静态资源增加路由前缀 在vue.config.js中找到这段代码: 找到publicPath,这个就是静态资源的默认路径,默认值是/,也就是静态资源默认路径是你的域名+路径,所以我们只需修改publicPath的值,就可以达到加前缀的效果,修改后效果如下: 现在你页面上的所有静态资源路径都会加上web前缀了 说说vue中的~(静态资源处理) Webpacked 资源 首先要

  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

  • 解决vue打包之后静态资源图片失效的问题

    1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同

随机推荐