vue前端-静态资源下载小坑记录

需求背景:批处理功能增加模板下载。

最简单方式就是el-link组件配置相对路径下载本地静态文件。
但本地文件目录试了相对路径:/项目名称/public/template 和/项目名称/src/ assets ,都报错找不到文件,好不容易试了对的路径部署到服务器又报错找不到文件。

以下是对应坑和解决方案。
坑1、静态文件放在项目/public/template文件夹,但下载路径应该是/template/目标文件.xlsx ,因为public文件夹是静态资源目录,项目编译后所有静态资源会部署在根目录下(vue.config.js可配置,默认配置:publicPath:'/)
el-link标签配置静态文件路径:

<el-link type="primary" href="/template/批量创建产品模板.xlsx"download="批量创建产品模板.xlsx">下载文件模板</el-link>

坑2、如果静态资源是中文名,部署到服务器有可能会乱码。这是因为服务器的编码跟本地可能不一致。可以改服务器编码,但如果后面不动这个静态资源,也可以直接服务器端手动重命名一下就可以了。
重命名命令:

mv ./??????????3g??.xlsx ./批量创建产品模板.xlsx

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/29150.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

物联网复习

概论 历史进程 物联网概念提出&#xff1a;20世纪90年代 2009年中国提出“感知中国” 物联网定义 目前较为公认的物联网的定义是&#xff1a; 通过射频识别&#xff08;RFID&#xff09;装置、红外感应器、 全球定位系统、激光扫描器等信息传感设备&#xff0c;按约…

队列 + 宽搜(BFS)

例题一 解法&#xff1a; 算法思路&#xff1a; 层序遍历即可~ 仅需多加⼀个变量&#xff0c;⽤来记录每⼀层结点的个数就好了。 例题二 解法&#xff08;层序遍历&#xff09;&#xff1a; 算法思路&#xff1a; 在正常的层序遍历过程中&#xff0c;我们是可以把⼀层的结点…

数据库分库分表

分库分表的目的在于减少数据库单库单表的负担&#xff0c;提高查询性能&#xff0c;缩短查询时间。分库分表分别水平切分和垂直切分。垂直切分&#xff1a;分为垂直分库和垂直分表&#xff0c;其中垂直分库是指根据业务的耦合度&#xff0c;将关联度较低的不同表存储于不同的库…

vue代办事件案例实战练习,配有答案解析

代办事件案例 该案例&#xff0c;综合了前面所学的知识&#xff0c;列入点击事件绑定&#xff0c;双向绑定&#xff0c;v-for循环语句&#xff0c;v-model双向绑定&#xff0c;以及input标签的不同type形式。 演示代码如下&#xff1a; <template > <div id"ku…

基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[3]-参数配置详细版

基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[3]-参数配置详细版 在开始参数配置之前,先执行以下脚本 python copy_config_example.py该脚本将会将所有config目录下的配置文件样例复制一份到config目录下,方便开发者进行配置。 接着,开发者可以根据自己的需求,对…

盲盒一番赏小程序开发,市场新活力

当下&#xff0c;年轻人的的消费水平在逐渐提升&#xff0c;对娱乐消费的需求也在提升&#xff0c;一番赏的出现&#xff0c;成功吸引了年轻人的关注&#xff0c;成为了年轻人娱乐休闲的主要方式&#xff0c;在商场中的一番赏店铺中&#xff0c;都能看到年轻人的身影。 一番赏…

手机录屏怎么操作?3个小技巧,轻松录屏

在数字化时代&#xff0c;手机录屏功能已逐渐成为我们日常生活和工作中不可或缺的工具。无论是为了记录游戏过程、制作教程&#xff0c;还是为了留存重要的视频通话&#xff0c;手机录屏都能发挥巨大的作用。本文将详细介绍手机录屏的3个功能、录屏小技巧等&#xff0c;帮助您更…

GD32 MCU启动后如何运行到main函数

GD32 MCU启动后如何运行到main函数入口&#xff1f;你是否也有这样的疑虑。在执行到main函数之前MCU干了哪些事情呢&#xff1f;下面为大家解答。 MCMCU上电后&#xff0c;首先会根据BOOT0和BOOT1的状态判断从主Flash/SRAM/ISP中启动&#xff0c;如果BOOT0为低电平&#xff0c…

grafana使用mysql远程存储

最近公司需要单独部署一套grafana集群&#xff0c;这是就需要集群内的grafana的数据保持一致&#xff0c;grafana支持mysql远程存储&#xff0c;我就使用mysql做了远程存储测试。 grafana部署请参考docker安装grafana,此文章只做远程存储部分说明 grafana的配置文件grafana.i…

白蚁监测装置:支持北斗定位

TH-BY2白蚁监测控制管理系统原理 采用白蚁喜欢吃的食物做诱饵&#xff0c;吸引白蚁取食&#xff0c;取食过程中触动报警装置。报警装置发出信号&#xff0c;通过物联网传输到监控系统&#xff0c;经过数据处理&#xff0c;监测结果呈现给用户。用户通知白蚁防治专业人员&#x…

jiagu、snownlp、jieba库横向对比

github代码 中文NLP资源库&#xff1a;https://github.com/fighting41love/funNLP snownlp&#xff1a;https://github.com/isnowfy/snownlp HanLP&#xff1a;https://github.com/hankcs/HanLP THULAC&#xff1a;https://github.com/thunlp/THULAC-Python Jiagu&#xf…

HTTP的Content-Length字段的作用

一、主要作用&#xff1a; (一)设置请求体或者响应体的字节数。 (二)请求方和响应方都可设置。 (三)通知接收方本次报文体的内容在读取多少个字节后就结束。 二、使用方法 Content-Length: 报文体的字节数三、注意事项 Content-Length头需要设置和协议体的主体内容字节数相等…

安全可靠测评结果公告

安全可靠测评结果公告&#xff08;2023年第1号&#xff09; 根据《安全可靠测评工作指南&#xff08;试行&#xff09;》要求&#xff0c;现将安全可靠测评结果予以公布&#xff0c;自发布之日起有效期三年。 特此公告。 中国信息安全测评中心 国家保密科技测评中心 2023年1…

C#常用关键字应用

在C#中&#xff0c;关键字用于定义语法结构和控制程序行为。以下是一些常用的关键字以及它们的用法示例&#xff1a; class // 定义一个类 public class MyClass {// 类的成员和方法 }using using System; // 引入命名空间public class Program {public static void Main(){// …

高端品牌网站建设

随着互联网的快速发展&#xff0c;越来越多的企业开始意识到高端品牌网站建设对于企业发展的重要性。高端品牌网站建设不仅是企业形象展示的窗口&#xff0c;更是与消费者进行有效沟通和互动的桥梁。下面从设计、内容和用户体验三个方面&#xff0c;探讨高端品牌网站建设的重要…

美国犹他州立大学《Nature Geoscience》(IF=18)!揭示草本植物对土壤有机碳的重要贡献!

随着全球变暖的影响越来越显著&#xff0c;碳固定成为了一个备受关注的话题。在这个背景下&#xff0c;热带草原被认为是一个潜在的碳固定区域。然而&#xff0c;目前的研究主要关注于在热带草原中种植树木&#xff0c;以期望增加土壤有机碳含量。但是&#xff0c;热带草原中的…

当OpenHarmony遇上OpenEuler

1、 安装openEuler 虚拟机、物理机器当然都可以安装。虚拟机又可以使用WSL、或者VMWare、VirtualBox虚拟机软件&#xff0c;如果需要安装最新版本&#xff0c;建议使用后者。当前WSL只支持OpenEuler 20.03。 1.1 WSL openEuler WSL的安装都是程序员的必备技能了&#xff0c;…

干G货,性能测试基本方法和原则,

一、性能测试关键点 评估性能指标——线程tps&#xff08;可架构给&#xff09; 吞吐量qps&#xff08;可架构给&#xff09; 错误率&#xff08;可架构给&#xff09; 平均响应时间&#xff08;可架构给&#xff09;模拟线上数据量了解接口有没有缓存&#xff0c;有缓存的需要…

springboot连接多个库

一个SpringBoot项目&#xff0c;同时连接两个数据库&#xff1a;比如一个是Mysql数据库&#xff0c;一个是oracle数据库&#xff08;啥数据库都一样&#xff0c;连接两个同为oracle的数据库&#xff0c;或两个不同的数据库&#xff0c;只需要更改对应的driver-class-name和jdbc…

Compose 可组合项 - DatePicker、DatePickerDialog

一、概念 一般是以对话框的形式呼出&#xff0c;DatePickerDialog 就是对 DatePicker 的一个简单对话框封装。 Composable fun DatePicker( state: DatePickerState, modifier: Modifier Modifier, dateFormatter: DatePickerFormatter remember { DatePickerFor…