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;
相关推荐
疯狂的沙粒14 分钟前
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
前端·uni-app·html
程序员秘密基地15 分钟前
基于vscode,idea,java,html,css,vue,echart,maven,springboot,mysql数据库,在线考试系统
java·vue.js·spring boot·spring·web app
小妖66618 分钟前
html 滚动条滚动过快会留下边框线
前端·html
heroboyluck32 分钟前
Svelte 核心语法详解:Vue/React 开发者如何快速上手?
前端·svelte
海的诗篇_34 分钟前
前端开发面试题总结-JavaScript篇(二)
开发语言·前端·javascript·typescript
琹箐44 分钟前
ant-design4.xx实现数字输入框; 某些输入法数字需要连续输入两次才显示
前端·javascript·anti-design-vue
程序员-小李1 小时前
VuePress完美整合Toast消息提示
前端·javascript·vue.js
Uyker2 小时前
从零开始制作小程序简单概述
前端·微信小程序·小程序
Dontla5 小时前
为什么React列表项需要key?(React key)(稳定的唯一标识key有助于React虚拟DOM优化重绘大型列表)
javascript·react.js·ecmascript
EndingCoder6 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架