nginx部署vue项目

一、项目打包

• 打开vscode在vue根目录打开命令行输入npm run build，这时就能看到dist文件夹，我们要将dist文件夹放到服务器上。

二、配置nginx

• 找到官网下载安装包

• 找到nginx下载安装目录，打开conf文件夹打开nginx.conf文件，修改如下：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost; #监听链接名称，可以修改

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   E:/vue/base/dist/;
            #root 是dist文件根目录，大家路径不一样，配置一下就可以了
            index  index.html index.htm;
        }
        #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;
        }
        #开启局域网访问
        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;
        }
    }
}

三、启动项目

（1）到nginx根目录，双击nginx.exe，启动nginx，想要关闭，打开任务管理器找到nginx结束 任务。

（2）到nginx根目录打开命令行，输入start nginx启动成功，关闭nginx -s stop