Vue打包后部署使用Nginx

在开发模式下，请求后台接口的时候，vue直接在vue.config.js里进行proxy的跨域配置，比如：

发布在Nginx上以后，这个vue.config.js里的跨域配置就没用了，因为他只在开发环境下起作用。
在Nginx上，需要修改conf文件夹里的nginx.conf，如下：

其他的都不变，加入：

这个proxy和proxy_pass就是vue.config.js里的proxy和target
其中 rewrite ^/proxy?(.*)$ $1 break;
这一行是必须要的
注意这里的正则表达，和vue.config.js里不大相同，?(.*)$表示匹配“/proxy”的内容一次或多次，$1表示直接替换成下面的proxy_pass
比如这样的配置：

那么请求后台的接口url:http://192.168.3.49:8888/proxy/admin/banner/add就会被替换成
http://192.168.3.47:6003/admin/banner/add

注意下面网上比较多的写法：
rewrite ^.+proxy/?(.*)$ /$1 break;
proxy_pass http://192.168.3.47:6003/;
注意因为proxy后面多了个/，所以下面的proxy_pass后面也要多个/,
就是http://192.168.3.47:6003/;
很多时候这里没搞清楚，就一直跨不过去
网上还有很多写法，加入了一大堆的add_header的设置，目前经过本人测试，其实并不需要。
如果跨不过去，基本上是rewrite这里的正则没有写对，和下面的proxy_pass没有匹配上导致的，而不是别的什么问题。

原文链接：https://blog.csdn.net/lijiabin102/article/details/109676005

Vue打包后部署使用Nginx相关推荐

springboot vue 打包分离部署
前情摘要: 开发工具:idea,就先这样吧一.SpringBoot 打包与部署 1.打包 //命令打包(-Dmaven.test.skip=true 跳过测试) mvn clean package ...
flask 渲染 vue 打包后的dist文件（直接用后端渲染）
flask 渲染 vue 打包后的dist文件(直接用后端渲染) vue项目打包出dist文件 npm run build 代码 from flask import Flask from flask ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
vue打包后element-ui部分样式（图标）异常问题
vue打包后element-ui部分样式(图标)异常问题参考文章: (1)vue打包后element-ui部分样式(图标)异常问题 (2)https://www.cnblogs.com/ljwsyt ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
[vue] 怎么修改vue打包后生成文件路径？
[vue] 怎么修改vue打包后生成文件路径? webpack:output.path vue-cli3: outputDir 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
[vue] 怎么解决vue打包后静态资源图片失效的问题？
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
vue打包后出现一些map文件的解决方法
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始 ...
vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后 ...

Vue打包后部署使用Nginx

Vue打包后部署使用Nginx相关推荐

最新文章

热门文章