vue在nginx中部署

vue在nginx中部署

本文主要介绍如何在nginx中部署vue前端。

本文阅读前提：

1、已经安装好nginx，可以参考如下文章：http://blog.csdn.net/wild46cat/article/details/78024989

2、已经打好vue的包，如果遇到问题，可以参考：http://blog.csdn.net/wild46cat/article/details/78024796

好，下面上货。

1、首先把dist文件夹放在一个路径下，我放在这里：

2、修改nginx的配置文件：

添加如下server

server {
        listen 7070;
        server_name localhost;


        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        root html;
        }


        root /data/xytest/project/zkview-ui/dist;
        index index.html;


        location / {
        try_files $uri $uri/ @router;
        index index.html;
        }


        location @router {
        rewrite ^.*$ /index.html last;
        }
}

3、添加完成后热加载nginx

nginx -s reload

然后就能够访问你的前端了。

本文主要介绍如何在nginx中部署vue前端。

本文阅读前提：

1、已经安装好nginx，可以参考如下文章：http://blog.csdn.net/wild46cat/article/details/78024989

2、已经打好vue的包，如果遇到问题，可以参考：http://blog.csdn.net/wild46cat/article/details/78024796

好，下面上货。

1、首先把dist文件夹放在一个路径下，我放在这里：

2、修改nginx的配置文件：

添加如下server

server {
        listen 7070;
        server_name localhost;


        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        root html;
        }


        root /data/xytest/project/zkview-ui/dist;
        index index.html;


        location / {
        try_files $uri $uri/ @router;
        index index.html;
        }


        location @router {
        rewrite ^.*$ /index.html last;
        }
}

3、添加完成后热加载nginx

nginx -s reload

然后就能够访问你的前端了。