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;
相关推荐
焦糖小布丁2 分钟前
通配符证书能给几个网站用?
前端
qiao若huan喜8 分钟前
6、webgl 基本概念 + 四边形纹理
前端·javascript·信息可视化·webgl
刘一说19 分钟前
深入理解 Spring Boot Web 开发中的全局异常统一处理机制
前端·spring boot·后端
啃火龙果的兔子31 分钟前
前端导出大量数据到PDF方案
前端·pdf
Lj2_jOker38 分钟前
QT 给Qimage数据赋值,显示异常,像素对齐的坑
开发语言·前端·qt
csj501 小时前
前端基础之《React(7)—webpack简介-ESLint集成》
前端·react
Jonathan Star1 小时前
CSS margin 折叠现象的实际代码示例
javascript·css·css3
咚咚咚小柒1 小时前
【前端】Webpack相关(长期更新)
前端·javascript·webpack·前端框架·node.js·vue·scss
2501_916008891 小时前
前端工具全景实战指南,从开发到调试的效率闭环
android·前端·小程序·https·uni-app·iphone·webview
诸葛韩信1 小时前
Webpack与Vite的常用配置及主要差异分析
前端·webpack·node.js