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;
相关推荐
_瑞13 小时前
深入理解灵动岛
前端·ios·app
想你依然心痛13 小时前
嵌入式日志系统:分级日志、环形缓冲区与远程输出——运行时调试、非侵入
android·前端·javascript
这是个栗子13 小时前
【Vue代码分析】 import.meta.env.DEV:现代前端工程中的环境变量
前端·javascript·vue.js·环境变量
像牛奶却不是牛奶13 小时前
记录几个前端实用小函数
前端·javascript
IDIOT___IDIOT13 小时前
Windows 解锁后 Chrome 弹出白屏的排查与修复
前端·chrome
tuddy78946413 小时前
前端应用的离线暂停更新策略:原理、实现与最佳实践
前端
希冀12313 小时前
【JavaScript】Javascript—JS进阶—Day03
开发语言·javascript·原型模式
hunterandroid13 小时前
多线程与线程池:从 Thread 到高效并发
前端
光影少年14 小时前
RN 架构:JS层、原生桥接层、原生渲染层 通信原理
开发语言·javascript·架构
用户693717500138414 小时前
AI Agent 里的 Loop 到底是什么?
android·前端·后端