一、创建项目

跟着vue快速新建一个项目用来配置nginx
vue官网
使用以下两个命令创建项目（这里时2.x版本）

npm install -g @vue/cli-init
vue init webpack my-project

• 1.启动项目使用

npm install
npm run dev (npm run serve) 看情况使用

• 2.打包

npm run build

二、配置Nginx

• 1.把打包后的dist文件单独放到任意目录下
• 2.配置nginx.conf文件
  
  配置内容如下（要特别注意代码行缩进规范）：

#user  nobody;
worker_processes  4;

#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;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
	client_max_body_size  300m;

    gzip  on;

    # HTTPS server
    upstream qxl-web {
        server localhost:8091 max_fails=3 fail_timeout=30s;
    }

 server {
        listen       8888;#默认端口是80，如果端口没被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        D:/nginx-1.19.4/web/dist;#vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }
}
 

三、常用命令

1.启动命令

nginx //配好nginx环境变量，直接nginx启动

2.停止命令

nginx -s stop //立即停止
nginx -s quit // 从容停止 进程完成后再停止服务
killall nginx //杀死nginx进程

3.重启命令

nginx -s reload //立即停止服务

4.验证配置文件是否正确

nginx -t //输出nginx.conf syntax is ok即表示nginx的配置文件正确