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;
相关推荐
Giant10010 小时前
深度玩转 Cursor Rules:让 AI 生成的代码 100% 符合团队规范
前端·面试
代码煮茶10 小时前
Vue3 组件通信实战 | 8 种组件通信方式全解析
前端·vue.js
kyriewen10 小时前
自定义事件:让代码之间也能“悄悄对话”
前端·javascript·面试
子兮曰10 小时前
别把它当成一次普通“源码泄露”:Claude Code 事件给 AI Agent 团队提了什么醒
前端·npm·claude
心之语歌10 小时前
Vue2 data + Vue3 ref/reactive 核心知识点总结
开发语言·前端·javascript
诸葛亮的芭蕉扇10 小时前
tooltip-position-solution
前端·vue.js·elementui
程序员小寒10 小时前
JavaScript设计模式(六):职责链模式实现与应用
java·javascript·设计模式
LXXgalaxy10 小时前
`摸鱼决策轮盘`【vue3+ts前端实战小项目】
前端
这是个栗子11 小时前
关于 TypeScript 的介绍
前端·javascript·typescript
亿元程序员11 小时前
亿元Cocos小游戏实战合集指南和答疑
前端