vue项目nginx代理图片访问请求

vue前台访问springboot项目图片，路径无法访问到图片文件，需要做下地址转换，推荐在springboot中配置虚拟路径，但是如果很多地方已经配置的磁盘路径，修改的地方比较多，可以使用nginx做代理，通过nginx拦截图片请求来处理，也是不错的。

nginx.conf配置：server {listen       8071;  #此端口不能和VUE项目端口重复！！！client_max_body_size 1024M;location /upload/ {root   D:/lsbms;   #此处图片路径为  D:/lsbms/upload/xxx.jpgindex  index.html index.htm;autoindex on;}location / {try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404root   D:/lsbmse/upload;index  index.html index.htm;}location @router {        rewrite ^.*$ /index.html last;}location /api/ {      #下面的代码没有什么用，我放着玩的rewrite ^/api/(.*) /$1 break;proxy_pass http://localhost:8091;}location /ips/ {rewrite ^/ips/(.*) /$1 break;proxy_pass http://localhost:8095;}}VUE项目路径转发index.js：var path = require('path')
var os = require('os'), ip = '', ifaces = os.networkInterfaces() // 获取本机ip
for (var i in ifaces) {for (var j in ifaces[i]) {var val = ifaces[i][j]if (val.family === 'IPv4' && val.address !== '127.0.0.1') {ip = val.address}}
}
module.exports = {build: {env: require('./prod.env'),index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',productionSourceMap: false,productionGzip: false,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report},dev: {env: require('./dev.env'),port: 8070,autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {// target: 'http://'+ ip +':8091',  // 接口域名 开发target: 'http://'+ ip +':8091',  // 接口域名 开发secure: true,  // 如果是https接口，需要配置这个参数changeOrigin: true,  //是否跨域pathRewrite: { // 如果接口本身没有api的路径，那么这里将发送到后端的请求重写为没有api的路径'^/api': '/'}},'/ips': {target: 'http://'+ ip +':8095',  // 接口域名 开发secure: true,  // 如果是https接口，需要配置这个参数changeOrigin: true,  //是否跨域pathRewrite: { // 如果接口本身没有api的路径，那么这里将发送到后端的请求重写为没有api的路径'^/ips': '/'}},'/upload': {  //主要看这里！！！target: 'http://'+ ip +':8071',  // 接口域名 开发secure: true,  // 如果是https接口，需要配置这个参数changeOrigin: true,  //是否跨域pathRewrite: { // 如果接口本身没有api的路径，那么这里将发送到后端的请求重写为没有api的路径'^/upload': '/upload'}},},cssSourceMap: false}
}

小心提醒：

nginx挂多了，不要再试了

清缓存！重启电脑！

有学到东西，点个赞哦，不然祝你天天写bug，~_~

-------------------------------------------------- 懒懒的分隔线 --------------------------------------------------

自己玩玩，随便看看

pygou.com

vue项目nginx代理图片访问请求相关推荐

vue项目nginx服务器部署详细流程....
vue项目nginx服务器部署 (1)前言将自己做的vue项目部署到服务器上,这里我采用的工具是Nginx,Nginx是一款轻量级的web服务器.反向代理服务器,由于它的内存占用小,启动快,高并发能 ...
nginx空白图片访问打点
nginx空白图片访问打点更多干货分布式实战(干货) spring cloud 实战(干货) mybatis 实战(干货) spring boot 实战(干货) React 入门实战(干货) 构 ...
FastDFS + Nginx代理方式访问
FastDFS + Nginx代理方式访问作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.在storage上安装nginx 1>.下载nginx软件(http://ngi ...
nginx代理图片和视频
nginx代理图片和视频首先官网下载nginx,以window为例,如图所配置nginx.conf 在该路径下放一张图片启动nginx 游览器中打开如果看到图片后,恭喜nginx配置成功了,哈 ...
在vue项目中实现图片打马赛克
在vue项目中实现图片打马赛克使用image-mosaic插件. 安装依赖 npm install image-mosaic -D 项目引用 // .vue 文件 <div id=" ...
vue项目不能使用localhost访问
vue项目不能使用localhost访问问题解决办法问题 vue项目不能使用localhost访问,但是使用本机的ip加端口号是可以访问的解决办法如果使用的是webstorm的话.可能右下角 ...
Linux中nginx配置图片访问路径
1.在Linux系统中下载nginx 这里介绍在ubuntu中下载nginx: https://blog.csdn.net/qq_23832313/article/details/83578836 2 ...
vue项目nginx反向代理配置
1.nginx配置文件设置 #开始配置我们的反向代理 location /prod-api{ rewrite ^/prod-api/(.*)$ /$1 break; include uwsgi_par ...
【异常解决】vue项目localhost:8080无法访问此网站或者无法访问此页面，localhost拒绝了我们的连接请求
localhost拒绝了我们的连接请求的解决方案一.背景描述二.问题原因三.解决方案方案一:重启前端和后端服务方案二:关闭被占用的端口程序,或者换新的其他端口重启服务方案三:启动Windo ...

vue项目nginx代理图片访问请求

vue项目nginx代理图片访问请求相关推荐

最新文章

热门文章