大家好，我是雄雄。欢迎关注微信公众号：雄雄的小课堂
前言
在平时的项目过程中，我们可能经常会遇到这样的场景。
上传资源，比如图片或者视频到服务器中，上传上去后，我们给数据库中存的是文件所在路径，然后在前端使用的时候直接通过路径的方式来获取上传的文件。
那么，在vue项目中，我们上传的文件至服务器中后，我们如何通过域名的方式，来获取到上传的文件呢？今天我们就来看一下。
解决过程
在遇到问题的时候，习惯性的打开手里的chatpt软件claude，在上面问了下，给的答案不尽如意：
问：
vue项目，在服务器上有个目录，如何通过域名的方式访问改目录下的文件
答：
要通过域名访问Vue项目中的文件,需要进行以下配置:
- 在Vue项目的根目录下创建vue.config.js文件,添加publicPath配置:
module.exports = {
publicPath: '/文件目录名称/'
}
比如文件目录名称为myfiles,那么配置为:
module.exports = {
publicPath: '/myfiles/'
}
- 将文件目录myfiles拷贝到服务器上与Vue项目相同层级的位置。
- 在服务器上为这个目录配置访问路径。比如在Nginx中配置如下location:
location /myfiles/ {
alias /path/to/myfiles/; # 指向实际目录位置
}
- 重启服务器使配置生效。
- 在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文件。
这是因为:
- vue.config.js中的publicPath告诉Vue以/myfiles/开头来解析静态资源路径
- nginx将/myfiles/映射到实际的文件目录,所以请求/myfiles/file.txt会访问到真实的file.txt文件
- 静态文件在Vue项目中以publicPath开头的路径被webpack处理并部署到相应位置。
所以通过这种配置,我们就可以通过域名的方式来访问服务器上的任意目录中的文件了。希望这能帮助你在Vue项目中访问外部资源!
我们可以看得出来，claude好像理解成了我想访问的是服务器上vue项目的资源，而不是其他目录下的文件，所以这个答案肯定不行。
于是我就自己研究了下。
解决方法
现在看来，解决方法很简单，只需要在nginx里面配置一下就行，配置信息如下：
location /video/ {
alias /life/chx/;
}
其中/life/chx/文件下方的就是我们上传的图片和视频。
顺便看看？
在这个信息爆炸的时代,要挑选出每天真正值得关注的新闻事件并不容易。雄雄的小课堂公众号致力于为你筛选每日新闻重磅事件,提供最精华的新闻内容。每天一早,雄雄的小课堂会推送40条左右的热点新闻,涵盖政治、经济、社会、娱乐、体育等领域,让你快速掌握全天最值得关注的事件动态。
雄雄的小课堂遵循“清新、实用”的原则,不刊登无谓八卦与怪谈,只为读者奉上最真实可靠的新闻报道。简明扼要的新闻描述配上关键词标注,让你轻松获取新闻核心要素。同时提供新闻图片及来源出处,保证新闻的权威性与可信度。
信息量大却无暇细读?小课堂为你智能筛选最精华的新闻集锦。新闻广而不散,雄雄的小课堂让你有选。如果你渴望每天第一时间掌握最热门新闻动态,雄雄的小课堂公众号将是你的最佳选择。
