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;
相关推荐
Momo__10 分钟前
你写的 import 重试,从来没生效过
前端·javascript·typescript
ruanno_top11 分钟前
1 万行表格只渲染 18 行:虚拟滚动让我放弃了三个功能
vue.js
鶴哥只手遮天13 分钟前
Angular 22 源码级深度解析-第 13 章 依赖注入(一):Injector 抽象、`R3Injector` 与 bloom filter
前端·开源·angular.js
青烟小生14 分钟前
前端 AI Agent 编排引擎:从 ReAct 循环到生成式 UI(完整版)
前端
MetWeave18 分钟前
一朵玫瑰,装下一年的风(《风不是一个数》系列第 5 篇
前端·数据可视化
UNIHHIOT20 分钟前
开源一套工业物联网平台:驱动崩了不影响别的协议,64MB 堆跑边缘网关
前端·后端
仨孩子的爹22 分钟前
套打总偏两毫米:预印刷单据的校准方法和三个误区
vue.js
deli00724 分钟前
秒杀超卖实测:1000 个并发请求下 SQL 加锁前后差多少
前端
徐小夕38 分钟前
JitKnow知识库4.8发布:本体+知识图谱检索引擎,让AI回答不再“一本正经地胡说八道”
前端·vue.js·github
智迁38 分钟前
MySQL 到 Kingbase 实时同步:从 Docker 部署到增删改验证
前端·后端