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;
相关推荐
llz_11230 分钟前
web-第四次课后作业
前端·spring boot·web
武清伯MVP1 小时前
前端跨域方案大合集
前端·javascript
一杯奶茶¥2 小时前
基于springboot的失物招领管理系统带万字文档 校园失物招领管理系统 失物认领管理系统java springboot vue
java·vue.js·spring boot·java项目
小刘|2 小时前
Spring AI Alibaba 集成和风天气 API 实战
java·服务器·前端
星星在线2 小时前
我是怎么把页面图片流量砍掉一半的
前端·javascript
木叶子---3 小时前
前端打包出错
前端·人工智能·tensorflow
JAVA面经实录9173 小时前
前端系统化学习计划表(含完整知识思维导图)
前端·学习
本末倒置1833 小时前
开发了一个所见所得的md编辑器,致敬Typora大佬
前端
kyriewen3 小时前
TypeScript 高级类型:我用 infer 写了一个类型安全的 EventBus,终于搞懂了泛型约束
前端·javascript·typescript
UXbot4 小时前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app