vue项目静态文件资源下载

业务场景:页面有一个导入功能,需要一个模板文件供下载,文件放在本地。

对于 Vue 3 + Vite 项目,使用 require 方法来导入模块是不被支持的。require 是 CommonJS 规范中用于模块导入的方法,在 Webpack 等构建工具中常用。
Vite 使用 ES 模块规范,并且支持动态导入(Dynamic Import)语法,可以通过 import() 来实现异步加载模块或导入非 JavaScript 文件;同时提供了一个静态资源处理的方法。
new URL(url, import.meta.url) https://www.vitejs.net/guide/assets.html#new-url-url-import-meta-url

1、vue2 + webpack

js 复制代码
<a :href="File" download>导入模板.xlsx</a>

import File from '@/assets/excels/导入模板.xlsx'

2、vue3 + vite

js 复制代码
<a :href="File" download>导入模板.xlsx</a>

const File = new URL('@/assets/excels/导入模板.xlsx', import.meta.url).href;
相关推荐
IT_陈寒18 分钟前
JavaScript的闭包陷阱,这个坑我躺了三天才爬出来
前端·人工智能·后端
计算机魔术师26 分钟前
Microsoft Research 与合作者证明 31 年历史的 KLS 猜想
前端
vx_Biye_Design29 分钟前
django房屋租赁推荐系统78455-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·课程设计·express
weixin_4173968335 分钟前
桌面云终端PXE启动失败怎么排查?从DHCP Option到镜像下发
开发语言·前端·php·技术·酒店·综合布线·弱电
OpsEye1 小时前
怎么实现大模型的按用户、按应用配额限流?
javascript·ai编程
林恒smileZAZ1 小时前
浏览器为什么加载不了超大图片
前端·vue.js·html5
hhwyqwqhhwy2 小时前
设备树之 provider 和 consumer
java·linux·前端
云舜言传2 小时前
Bloom 手势演示操作 · 录屏指南
javascript·深度学习·机器学习
垆边人似月.3 小时前
Python中如何使用get函数实现频次查询
服务器·前端·python
moshuying3 小时前
DeepSeek开源生产级推理框架DeepInfer:单集群一天处理155万亿token,这意味着什么?
前端