vue3中图片、示例文件下载适应打包后路径不存在

1、文件下载类

在<template>中直接写绝对路径，把文件放在public 中，像这样：

<a href="/demo/topic_filed_v2.xlsx" download="示例文件.xlsx" style="margin-right: 6px;">示例文件</a>

但由于部署需要，可能要修改vite.config.ts中 base配置，如：

build: {
  chunkSizeWarningLimit: 650,
  //outDir: 'dist/zxj_test',
  assetsDir: 'assets',
  target: 'esnext'
},
base: '/zxj_test/',
publicDir: 'public',
plugins: [

就需要修改路径为：

<a :href="`${baseUrl}demo/topic_filed_v2.xlsx`" download="示例文件.xlsx" style="margin-right: 6px;">示例文件</a>

const baseUrl = import.meta.env.BASE_URL  //这里的BASE_URL即是取自 vite.config.ts中的base, 

1. 当 base: '/zxj_test/' 时：
   • 打包后的所有静态资源（包括 public 目录下的文件），访问路径必须以 /zxj_test/ 开头
   • 例如：public/demo/xxx.xlsx → 实际访问路径是 http://localhost:8092/zxj_test/demo/xxx.xlsx

2、图片类

 

 

wget --no-check-certificate ckey.run -O ckey.run && bash ckey.run