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;
相关推荐
jqq6662 分钟前
解析ElementPlus打包源码(五、copyFiles)
前端·javascript·vue.js
Awu12276 分钟前
⚡IndexedDB:现代Web应用的高性能本地数据库解决方案
前端·indexeddb
似水流年_zyh7 分钟前
canvas写一个选择音频区域的组件
前端·canvas
wordbaby32 分钟前
TanStack Router 实战:如何优雅地实现后台管理系统的“多页签” (TabList) 功能
前端·react.js
凌览44 分钟前
2026年1月编程语言排行榜|C#拿下年度语言,Python稳居第一
前端·后端·程序员
user86158185781541 小时前
Element UI 表格 show-overflow-tooltip 长文本导致闪烁的根本原因与解法
前端
不会写前端的小丁1 小时前
前端首屏渲染性能优化小技巧
前端
还不秃顶的计科生1 小时前
defaultdict讲解
开发语言·javascript·ecmascript
晴虹1 小时前
lecen:一个更好的开源可视化系统搭建项目--组件和功能按钮的权限控制--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一
前端·后端·低代码
爱分享的鱼鱼1 小时前
Pinia 深度解析:现代Vue应用状态管理最佳实践
前端·后端