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;
相关推荐
柒和远方15 小时前
LeetCode 4. 寻找两个正序数组的中位数 —— 二分划分的艺术
javascript·python·算法
金色的暴发户15 小时前
一劳永逸解决Codex手机验证
前端·人工智能·开源
默_笙15 小时前
😢 我被 JS 的 this 整不会了:同一个函数,换个“地区”调用,结果就不一样
javascript
DanCheOo15 小时前
AI 应用的可观测性:你的 AI 系统在生产上到底表现怎么样
前端·openai
Hyyy15 小时前
流式渲染用react-markdown还是Vercel/Streamdown
前端
Tom@敲代码16 小时前
js学习笔记-01
javascript·笔记·学习
风中的小甜瓜16 小时前
ASP.NET Page 那点事
java·前端·asp.net
木西16 小时前
告别机械重复:使用 Node.js + Playwright 构建 24 小时全自动测试网领水脚本
前端·javascript·node.js
不好听61316 小时前
JavaScript Promise 从入门到精通(一):为什么需要 Promise 以及它是什么
javascript
西柚小萌新16 小时前
【论文写作】--LaTeX详细入门教程2
前端·html