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;
相关推荐
014-code12 小时前
Vue3 性能优化实战
前端·vue.js·性能优化
强子感冒了13 小时前
JavaScript 零基础入门笔记:核心概念与语法详解
开发语言·javascript·笔记
css趣多多13 小时前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
哆啦A梦158813 小时前
Vue3魔法手册 作者 张天禹 09_props的使用
前端·vue.js·typescript
哆啦A梦158814 小时前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
广州华水科技14 小时前
单北斗变形监测在大坝安全和地质灾害预警中的应用与优势
前端
一叶星殇14 小时前
Windows 下用 Nginx 部署 Vue + .NET WebApi 全流程实战
vue.js·windows·nginx
阿珊和她的猫14 小时前
深入理解 Vue 3 的 `setup` 函数
前端·vue.js·状态模式
weixin1997010801614 小时前
微店商品详情页前端性能优化实战
前端·性能优化
FindYou.14 小时前
基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)
javascript·vue