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;
相关推荐
yanyu-yaya24 分钟前
前端面试题
前端·面试·前端框架
二哈喇子!1 小时前
使用NVM下载Node.js管理多版本
前端·npm·node.js
GGGG寄了1 小时前
HTML——文本标签
开发语言·前端·html
摘星编程2 小时前
在OpenHarmony上用React Native:ActionSheet确认删除
javascript·react native·react.js
2501_944521592 小时前
Flutter for OpenHarmony 微动漫App实战:推荐动漫实现
android·开发语言·前端·javascript·flutter·ecmascript
Amumu121383 小时前
Vue核心(三)
前端·javascript·vue.js
CoCo的编程之路3 小时前
2026 前端效能革命:如何利用智能助手实现“光速”页面构建?深度横评
前端·人工智能·ai编程·comate·智能编程助手·文心快码baiducomate
RFCEO3 小时前
HTML编程 课程五、:HTML5 新增语义化标签
前端·html·html5·跨平台·语义化标签·可生成安卓/ios·html最新版本
Irene19913 小时前
JavaScript中,为什么需要手动清理事件
javascript·手动清理事件监听器
摘星编程3 小时前
OpenHarmony环境下React Native:Zustand持久化存储
javascript·react native·react.js