现象：在浏览器中直接访问www.test.com/api1/login会404。但如果你先访问www.test.com后再点“登录" 跳转到www.test.com/api1/login是正常显示。f5刷新又会出现 404了这是web单页面开发模式造成的。现在主流的前端框架基本都是单页面的。如：react、vue等。单页面简单来说就是访问所有资源路径、其实页面内容只有一个（一般是index.html）。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件（可以理解为页面片段...
本篇文章给大家带来的内容是关于vue代理模式nginx配置的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前端使用vue.js开发,后端使用tornado框架提供restful API, vue.js使用代理;如 当前端js请求http://192.168.9.62:9000/api/orders时候后端通过nginx配置去请求http://192.168.9.62:9000/v1/orders需求nginx需要将前端js请求http://192.168.9.62:9000/api/orders 转发 http://192.168.9.62:9000/v1/order...
其实这个网上已经有了很多人写了，为什么我还要再写这一篇博客？因为我亲身把他们生产的坑给踩了个通透（摊手。
正文开始
本次的项目是基于vue-cli生成的项目，采用的vue-router的history模式。到这里相信大部人还是类似了，接下来就是一个坑死人不偿命的网上诸多博客都在采用的巨坑。
在进行打包的时候，很多博客里都写了，将/config/index.js下，build中的assetsPublicPath从/改为./。我很后悔，为什么当初这样照做的时候不去思考...
nginx配置：server {listen 123;server_name 192.168.88.128;location /calledfront/trafficbg/public/ {proxy_pass http://127.0.0.1:8080/;proxy_pass_header Set-Cookie;proxy_set_header Host $proxy_host;}location /calledfront {root /usr/local/nginx/html/ctyuncss; #路径配置到vue项目的上层目录#index index.html index.htm;try_files $uri $uri/ /calledfront/index.html; #calledfront为vue项目打包后的文件夹...
1.修改vue.config.js 中的 publicPath 值 使名称与后面nginx配置的路径名相同
2.修改rotuer文件夹下面的index.js
新增base属性
3.npm 打包
4.找到打包后的dist文件夹下面的index.html文件，编辑状态打开
找到head标签
新增<meta base="/test/">标签
5.修改dist文件夹名称为test，与nginx名称保持一致
6.修改nginx配置
新增location 指定路径名
重启nginx服务。发版成功！
介绍#
vue在国内的前端地位可谓是如日中天，由于目前主流的前后端分离式开发，让许多前端小伙伴不太了解服务器操作特别是Linux，而许多后台开发人员虽然精通服务器，却不懂前端框架如何发布。本篇将详细介绍vue构建静态文件发布至Linux并配置Nginx服务代理https，在发布前我们先需要准备以下环境：Linux服务器：CentOS、Ubuntu
域名：云服务商处购买域名
SSL证书：云服务商购买或Open SSL配置服务器#
下面以阿里云服务为例，介绍Li...
介绍
vue在国内的前端地位可谓是如日中天，由于目前主流的前后端分离式开发，让许多前端小伙伴不太了解服务器操作特别是Linux，而许多后台开发人员虽然精通服务器，却不懂前端框架如何发布。本篇将详细介绍vue构建静态文件发布至Linux并配置Nginx服务代理https，在发布前我们先需要准备以下环境：Linux服务器：CentOS、Ubuntu
域名：云服务商处购买域名
SSL证书：云服务商购买或Open SSL配置服务器
下面以阿里云服务为例，介绍Linu...
后端提供的请求接口完整地址示例：https://www.baidu.com/company/getlist
前端配置：
一：axios请求url: /api/company/getlist
nginx配置代理转发跨域：
方法1：
location ^~ /api/ {
proxy_pass https://www.baidu.com/; # 转发地址
}
方法2：
location ^~ /api/ {
rewrite ^/api/(.*)$ /$1 break; # 重写路径将 api 替换为空
proxy_pass https://www.baidu.com;
}
二：axios请求url: /company/getlist
loc...
vue nginx配置
记录线上配置坑，采用官方配置说明仍无效
记录线上配置坑，采用官方配置说明仍无效
在nginx配置为根路径’/’,设置官方推荐配置，仍不生效
官方推荐配置
location / {root /xxx路径/er-ui;try_files $uri $uri/ /index.html;
}采用以下配置解决问题location / {root /xxx路径/er-ui;if (!-e $request_filename){rewrite ^/ /index.html;}index index.html index.htm;}
[ 测试环境服务器目录 ](温馨提示：配置1，配置2均在 vue.config.js 文件中修改)
1. 配置 publicPath
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，
例如：https://www.histomed.com。
如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径，
例如：如果你的应用被部署在 https://www.histomed.com/admin/，则设置 baseUrl 为 /admin/。
(此处做了环境的区分，其实这里可以直接写为publicPa...
server {listen 80;server_name localhost;index index.html index.htm;root /xxx/xxx;location / {try_files $uri $uri/ /index.html =404;}}
