nginx部署vue项目

nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。

1、安装Nginx

2、打包vue项目

vue项目文件目录下运行命令：npm run build，将项目打包好，然后当前项目目录下有一个dist文件夹，该文件夹下有一个index.html和static文件夹。

3、把vue项目安装到nginx

把打包好的dist文件夹拷贝到安装nginx里的html文件夹下

4、修改nginx配置文件

配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		location / {
            root   /usr/local/nginx/html/dist;  # 前端工程的目录
            index  index.html;  # 前端页面
			try_files $uri $uri/ /index.html;# 解决刷新页面变成404问题的代码
        }
        location /api/ {  # 反向代理到后端工程
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8090/;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }