Vue项目部署--nginx配置，history 和hash模式以及反向代理

发表于 linux 分类，标签:
19 03月 2020
0

# Vue项目部署--nginx配置


网上有一堆实例， 但是history模式大部分测试都无效， 还是亲自动手试试！


## 一、 打包项目


```

npm run build

```

打包结束，会生成 dist 文件夹. 将打包好的文件，复制到nginx目录。

> dist

> D:\nginx\nginx-1.16.1 (本人nginx存放路径)



## 二、Nginx


### 2.1 vue hash 模式

1. 配置修改

配置文件在 nginx.conf中，具体目录如下：注意以下地址为本人存放nginx的目录

> D:\nginx\nginx-1.16.1\conf\nginx.conf (本人nginx存放路径)

```


 server { 

    # 服务器端口

    listen       80;

    # 服务器名称

    server_name  localhost;

    # 路径配置

    location / {

        # 相对路径配置，基于nginx启动的位置

        root   dist;

        index  index.html;

    }

    # 后端接口，反向代理  

    location ~ /rest {

       #  反向代理

       proxy_pass http://ip:port;

    }

 }


```


2. 启动

cd 到目录,例如我的nginx在以下目录，执行cmd命令面板

> D:\nginx\nginx-1.16.1 (本人nginx存放路径)

```

start nginx

```


3. 浏览器访问


```

http://localhost

// 默认会跳到对应的路由，vue-router重定向，可能变成这样！

http://localhost/#/a

```


### 2.2 vue history 模式



1. 配置修改

配置文件在 nginx.conf中，具体目录如下：注意以下地址为本人存放nginx的目录

> D:\nginx\nginx-1.16.1\conf\nginx.conf  (本人nginx存放路径)

```


 server { 

    # 服务器端口

    listen       80;

    # 服务器名称

    server_name  localhost;

    # 路径配置

    location / {

        # 相对路径配置，基于nginx启动的位置

        root   dist;

        index  index.html;

        # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404

        # Nginx知识补充：

        # try_files 指令：

        # try_files $uri $uri/  /index.html;

        # 作用域：server location

        # 语法：try_files file ... uri 或 try_files file ... = code

        # 其作用是按顺序检查本地（服务器）文件是否存在，

        # 返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），

        # 如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。

        # 需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。

        # 最后一个参数是回退URI且必须存在，否则会出现内部500错误。命名的location也可以使用在最后一个参数中。

        # 与rewrite指令不同，如果回退URI不是命名的location那么args不会自动保留，如果你想保留args，则必须明确声明。

        # 但是其实这官方的demo是有一些需要注意的地方的。

        try_files $uri $uri/ @router;  

    }

    # 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件

    # 因此需要rewrite到index.html中，然后交给路由在处理请求资源

    location @router {

        # last ：相当于Apache里德(L)标记，【表示完成rewrite ！important】【将得到的路径重新进行一次路径匹配】，浏览器地址栏【URL地址不变】

        # break；本条规则匹配完成后，【终止匹配  ！important】，【不再匹配后面的规则】，浏览器地址栏【URL地址不变】 一般不用这个选项！

        # redirect： 返回302临时重定向，浏览器地址【会显示跳转后的URL地址】

        # permanent：返回301永久重定向，浏览器地址栏【会显示跳转后的URL地址】

        # 1.静态资源，去掉项目名，进行定向 \为转义， nginx 中的 / 不代表正则，所以不需要转义

        rewrite (static/.*)$ /$1   redirect;

        # 2.非静态资源，直接定向index.html

        rewrite ^.*$   /index.html  last;

     }

     # 后端接口，反向代理  

     location ~ /rest {

        #  反向代理

        proxy_pass http://ip:port;

     }

 }


```


2. 启动

cd 到目录,例如我的nginx在以下目录，执行cmd命令面板

> D:\nginx\nginx-1.16.1  (本人nginx存放路径)

```

start nginx

```


3. 浏览器访问


```

http://localhost

// 默认会跳到对应的路由，vue-router重定向，可能变成这样！

http://localhost/a

```



0 篇评论

发表我的评论