nginx反向代理部署vue项目(history模式)的方法 - front-gl - 博客园
前言：
根据标题我们要区分出两个信息
1. history 模式部署 （ vue的路由模式如果使用history，刷新会报404错误。）
2. Nginx 做反向代理
问题1思考：
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。
但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下：__http://localhost:8080/bank/page/count 这样的了；__
在路由的配置就是如下：我们还是以 vue-cli项目为例：
在src/router/index.js 代码如下：
; "复制代码")
import Vue from 'vue';
import Router from 'vue-router'; // import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
mode: 'history', // 访问路径不带井号 需要使用 history模式
base: '/bank/page', // 基础路径
routes: [
{
path: '/count',
name: 'count',
component: resolve =\> require(\['@/views/count'\], resolve) // 使用懒加载}
]
});
; "复制代码")
这里history的这种模式需要后台配置支持。比如：
当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404，怎么解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了，即根目录下的index.html。
官方给出了几种解决方式如下：
Nginx知识补充：
try_files 指令：
语法：try_files file ... uri 或 try_files file ... = code
默认值：无
作用域：server location
其作用是按顺序检查本地（服务器）文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。最后一个参数是回退URI且必须存在，否则会出现内部500错误。命名的location也可以使用在最后一个参数中。与rewrite指令不同，如果回退URI不是命名的location那么_args不会自动保留，如果你想保留args，则必须明确声明。_
但是其实这官方的demo是有一些需要注意的地方的。
问题2思考：
Nginx 如何做反向代理
公司为了安全起见，域名解析是另一台服务器（A）ip地址，通过Nginx代理访问另一台服务器（B）}的静态资源
这里我们需要同时在两台服务器上配置Nginx,服务器A做反向代理，服务器B做web服务器启动web项目。
注意：官网说的配置Nginx服务器是需要在web服务器上来配置的。
反向代理不需要配置的，不然页面会报错的，css,js都解析错误，因为try_files是访问本地静态资源的，而代理服务器没有放资源的。报错如下
在Nginx做反向代理过程中，也遇到了一个问题，就是页面刷新，重定向时候https跳到http，导致页面404报错，这种情况需要在代理服务器上配置Nginx，强制http转https,与history没关系！！！
这样设置下，就可以了！
下面附上代理服务器的Nginx代码：
解释说明： 1.监听443端口，下载ssl证书，加上代理头部设置proxy_set_header 等一系列。
2.更多详细Nginx配置https，加重定向跳转，可以访问这里。
附上Nginx作为web服务器的配置：
; "复制代码")
server {
listen 80;
server_name localhost;
root /data/mystatic/yihao01-iotstatic/;
index index.html;
autoindex on;
charset utf-8;for ssl
ssl off;
ssl_certificate /usr/local/nginx/conf/ssl-key/0easy/0easy.cer;
ssl\_certificate\_key /usr/local/nginx/conf/ssl-key/0easy/0easy.key;ssl_session_timeout 5m;
ssl\_session\_cache builtin:1000 shared:SSL:10m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!AESGCM:!EXPORT:+MEDIUM;
ssl\_prefer\_server_ciphers on;for log
access_log /log/nginx/access.log main;#location /static {
# root /data/mystatic/yihao01-iotstatic/;
# }
location ~ /(system|car)/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取。
location / {
alias /data/mystatic/yihao01-iotstatic/;
#expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服>务器的压力
# expires 1d;
index index.html index.htm;
#### history的配置
try_files $uri $uri/ /index.html; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404}
配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取。
location /yihao01-aiotcloud-admin {
alias /data/mystatic/yihao01-aiotcloud-admin/;
#expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力
# expires 1d;
### hash配置
index index.html;
autoindex on;
}
location @router {
rewrite ^.*$ /index.html last;}
# 配置路由只需配置到网关上，网关会自动转发到相应的服务器上
location /xx-permission-management/ { // api请求头部前缀
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
location /xx-configuration-management/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
location /xx-device-management/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
location /xx-security-authentication/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
location /xx-shadow-service/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
location /xx-developer-center/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
location /xx-message-service/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
location /xx-automate-service/ {
proxy\_set\_header Host $host;
proxy\_set\_header X-Real-IP $remote_addr;
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;
proxy_pass http://192.168.0.104:7995;}
}
; "复制代码")
原网址: 访问
创建于: 2020-09-20 00:29:05
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论