前端项目public目录下的文件,部署到服务器后无法下载

问题回溯

这是一个外包项目,部署在本公司的域名的根路径下是可以下载的,但是部署到客户服务器时,是部署在网站根路径下的二级路由(/web-app)下的,这样就访问不到了

ini 复制代码
<div class="download"> 
    <a href="/static/file/auth.zip" download="授权文件.zip">下载授权资料</a>
</div>

问题分析

webpack是如何处理静态资源的

  1. 如src/assets中的文件通过相对路径被引用,这类引用会被webpack处理
  2. 放在public目录下或者通过绝对路径引用,这类资源会被直接拷贝,不会经过webpack处理

url转换规则

  1. 如果路径是绝对路径,会被原样保留
  2. 如果是相对路径,将会看作模块依赖被webpack处理
  3. 如果以@开头,也会被看作模块依赖,一般@的alias配给了src目录
  4. 如果以~开头,其后的部分将被看作模块依赖,既可以加载含有别名的静态资源,又可以加载node_modules的资源

结论

  1. 参照以上webpack的解析规则分析,这个引用是绝对路径而且在public中,webpack不做处理,webpack中配置的publicPath也自然作用不到这里,所以打包之后的路径仍是/static/file/auth.zip
  2. 当部署在网站的根路径时,点击a标签访问路径是https://xxx.com/static/file/auth.zip,是可以找到资源的
  3. 如果网站部署在网站根路径下/web-app之后,点击a标签访问路径是https://xxx.com/static/file/auth.zip,真实资源路径是https://xxx.com/web-app/static/file/auth.zip

问题解决

将访问路径由https://xxx.com/static/file/auth.zip转换为https://xxx.com/web-app/static/file/auth.zip即可,这里采用环境变量的方式将nginx的路由配置在.env文件中,也可以直接替换成/web-app,但是路由变动之后,改动会很多

xml 复制代码
<div class="download"> 
    <a :href="authPath" download="授权文件.zip">下载授权资料</a> 
</div> 
<script setup> 
import { Warning } from '@element-plus/icons-vue'
const authPath = `${process.env.VUE_APP_PUBLIC_PATH}/static/file/auth.zip` 
</script>

参考

Vue处理静态资源:public、assets目录 - vickylinj - 博客园 (cnblogs.com)

相关推荐
前端小巷子几秒前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*16888 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼24 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript