通过域名的方式访问服务器里的资源

简介: 通过域名的方式访问服务器里的资源


前言

在平时的项目过程中,我们可能经常会遇到这样的场景。

上传资源,比如图片或者视频到服务器中,上传上去后,我们给数据库中存的是文件所在路径,然后在前端使用的时候直接通过路径的方式来获取上传的文件。

那么,在vue项目中,我们上传的文件至服务器中后,我们如何通过域名的方式,来获取到上传的文件呢?今天我们就来看一下。

解决过程

在遇到问题的时候,习惯性的打开手里的chatpt软件claude,在上面问了下,给的答案不尽如意:

问:

vue项目,在服务器上有个目录,如何通过域名的方式访问改目录下的文件

答:

要通过域名访问Vue项目中的文件,需要进行以下配置:

  1. 在Vue项目的根目录下创建vue.config.js文件,添加publicPath配置:
module.exports = {
  publicPath: '/文件目录名称/' 
}

比如文件目录名称为myfiles,那么配置为:

module.exports = {
  publicPath: '/myfiles/' 
}
  1. 将文件目录myfiles拷贝到服务器上与Vue项目相同层级的位置。
  2. 在服务器上为这个目录配置访问路径。比如在Nginx中配置如下location:
location /myfiles/ {
  alias /path/to/myfiles/;  # 指向实际目录位置 
}
  1. 重启服务器使配置生效。
  2. 在Vue项目中,你可以通过/myfiles/文件的相对路径来访问这些文件了。
    举个例子,文件目录结构:
  • Vue项目
  • vue.config.js
  • public
  • index.html
  • myfiles
  • file.txt
  • nginx.conf

vue.config.js:

module.exports = {
  publicPath: '/myfiles/' 
}

nginx.conf:

location /myfiles/ {
  alias /path/to/myfiles/;  
}

则可以在Vue项目中通过/myfiles/file.txt来访问myfiles目录下的file.txt文件。

这是因为:

  1. vue.config.js中的publicPath告诉Vue以/myfiles/开头来解析静态资源路径
  2. nginx将/myfiles/映射到实际的文件目录,所以请求/myfiles/file.txt会访问到真实的file.txt文件
  3. 静态文件在Vue项目中以publicPath开头的路径被webpack处理并部署到相应位置。
    所以通过这种配置,我们就可以通过域名的方式来访问服务器上的任意目录中的文件了。希望这能帮助你在Vue项目中访问外部资源!

我们可以看得出来,claude好像理解成了我想访问的是服务器上vue项目的资源,而不是其他目录下的文件,所以这个答案肯定不行。

于是我就自己研究了下。

解决方法

现在看来,解决方法很简单,只需要在nginx里面配置一下就行,配置信息如下:

location /video/ {
            alias  /life/chx/;
        }

其中/life/chx/文件下方的就是我们上传的图片和视频。

顺便看看?

在这个信息爆炸的时代,要挑选出每天真正值得关注的新闻事件并不容易。雄雄的小课堂公众号致力于为你筛选每日新闻重磅事件,提供最精华的新闻内容。每天一早,雄雄的小课堂会推送40条左右的热点新闻,涵盖政治、经济、社会、娱乐、体育等领域,让你快速掌握全天最值得关注的事件动态。

雄雄的小课堂遵循“清新、实用”的原则,不刊登无谓八卦与怪谈,只为读者奉上最真实可靠的新闻报道。简明扼要的新闻描述配上关键词标注,让你轻松获取新闻核心要素。同时提供新闻图片及来源出处,保证新闻的权威性与可信度。

信息量大却无暇细读?小课堂为你智能筛选最精华的新闻集锦。新闻广而不散,雄雄的小课堂让你有选。如果你渴望每天第一时间掌握最热门新闻动态,雄雄的小课堂公众号将是你的最佳选择。

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
3天前
|
存储 弹性计算 监控
【阿里云弹性计算】阿里云 ECS 性能优化秘籍:提升应用响应速度与资源利用率
【5月更文挑战第22天】阿里云ECS优化涉及实例规格选择、OS与应用配置、网络配置、存储优化及数据库连接池管理。合理挑选CPU和内存,关闭无关服务,利用EIP和负载均衡优化网络,选择合适存储类型,并通过监控工具进行性能分析和压力测试,以提升响应速度,优化资源利用率,降低成本,增强企业竞争力。示例展示了Java数据库连接池配置优化。通过持续探索和实践,可最大化发挥ECS潜力。
66 7
|
10天前
|
网络协议
​LabVIEW从另一个VI或通过VI服务器访问正在运行的可执行文件
​LabVIEW从另一个VI或通过VI服务器访问正在运行的可执行文件
15 0
|
6天前
|
缓存 弹性计算 数据库
2核4G云服务器可以支持多少人同时在线访问?
阿里云2核4G服务器性能受多种因素影响,如应用效率、并发数、内存使用、CPU性能、公网带宽、数据库及CDN/OSS服务。优化代码、配置Web服务器、管理内存、选择高效数据库策略、利用缓存、使用CDN和OSS可提升服务器承载能力。实际支持在线人数因场景不同而变化,需综合评估并进行压力测试。年租仅199元
33 9
|
10天前
|
存储 前端开发 Linux
在 SAP ABAP 系统里访问 FTP 服务器
在 SAP ABAP 系统里访问 FTP 服务器
12 0
|
10天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
22 0
|
10天前
【计网·湖科大·思科】实验一 熟悉仿真软件及访问WEB服务器
【计网·湖科大·思科】实验一 熟悉仿真软件及访问WEB服务器
13 0
|
10天前
|
域名解析 弹性计算 应用服务中间件
基于nginx反向代理实现OSS固定域名IP访问
本文基于阿里云OSS手册:https://help.aliyun.com/zh/oss/use-cases/use-an-ecs-instance-that-runs-centos-to-configure-a-reverse-proxy-for-access-to-oss,继续深入讨论如何利用nginx反向代理,实现固定的IP/域名访问OSS bucket。官方文档能够解决大部分的反向代理固定IP访问oss bucket的场景,但是对于必须使用域名作为endpoint的系统,会出现signatrue鉴权问题。本文继续在官方文档的基础上,将反向代理需要域名作为endpoint的场景补齐方案。
|
10天前
|
网络协议 安全
ensp中nat server 公网访问内网服务器
ensp中nat server 公网访问内网服务器
|
10天前
|
域名解析 存储 缓存
Linux中搭建DNS 域名解析服务器(详细版)
Linux中搭建DNS 域名解析服务器(详细版)
|
10天前
|
安全 Linux 网络安全
Linux _ apache服务器部署 不同域名—访问不同网站(多网站)
Linux _ apache服务器部署 不同域名—访问不同网站(多网站)