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

大家好，我是雄雄。欢迎关注微信公众号：雄雄的小课堂

前言

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

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

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

解决过程

在遇到问题的时候，习惯性的打开手里的chatpt软件claude，在上面问了下，给的答案不尽如意：
问：
vue项目，在服务器上有个目录，如何通过域名的方式访问改目录下的文件
答：
要通过域名访问Vue项目中的文件,需要进行以下配置:

1. 在Vue项目的根目录下创建vue.config.js文件,添加publicPath配置:

module.exports = {
  publicPath: '/文件目录名称/' 
}

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

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

2. 将文件目录myfiles拷贝到服务器上与Vue项目相同层级的位置。
3. 在服务器上为这个目录配置访问路径。比如在Nginx中配置如下location:

location /myfiles/ {
  alias /path/to/myfiles/;  # 指向实际目录位置 
}

4. 重启服务器使配置生效。
5. 在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条左右的热点新闻,涵盖政治、经济、社会、娱乐、体育等领域,让你快速掌握全天最值得关注的事件动态。

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

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