Nginx部署vue项目，Nginx搭建一个静态资源服务器

一.Nginx安装(Centos)

yum install -y nginx

 安装后启动nginx

service nginx start

通过ip或者域名访问以下，看看是不是启动成功了

二.Nginx部署vue

1.vue项目编译(推荐vue element-ui框架，方便，开发效率高)

npm run build

2.将编译好后的dist文件夹上传到centos服务器中

3.编辑nginx配置文件nginx.conf

vi /etc/nginx/nginx.conf

配置文件内容配置

 server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
            
        }
        }

include /etc/nginx/default.d/*.conf，我们可以在/etc/nginx/default.d文件夹下配置单个服务。

4.为自己的项目编辑配置文件（vue项目）

vi  /etc/nginx/default.d/vue.conf

   vue项目配置文件

server {
        listen       8081;
        server_name  localhost;
        root         /my/app/vue;

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

        error_page 404
            /404.html;
            location = /40x.html {
        }

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

5.重启Nginx或者重新加载。

service nginx restart

service nginx reload

可成功通过8081端口访问index.html文件。

 

 

三.Nginx同时部署静态资源服务

    1.编辑静态资源服务配置文件

server {
        listen       8002;
        server_name  localhost;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

         location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$  {
                root /my/images/;
                autoindex on;# 开启预览功能
            }

        error_page 404
            /404.html;
            location = /40x.html {
        }

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

通过8002端口可以访问/my/images下的静态资源。

 

 

四.总结

nginx可以同时启动多个服务，为多个服务提供统一入口。

（经验积累：nginx启动或者重启报错的时候，要耐心看日志,不要急躁）