Vue项目部署，NGINX配置

1.  vue项目打包

1.1 在终端输入打包命令，进行打包　　

npm run build

打包后会生成文件夹dist

1.2 把打包好的文件移动到/opt/下面

sudo mv  dist/ /opt/

 

2. 开始配置Nginx

2.1 进入到配置目录下 

cd /etc/Nginx//sites-enabled/

2.2 使用vim打开default文件进行配置

sudo vim default

2.3 在default文件中添加如下内容

erver {
        listen 7777;
#       listen [::]:80;
#
        server_name localhost;
        root /opt/dist;
        index index.html;
        location / {
                try_files $uri $uri/ =404;
        }

        # 配置跨域代理
        location /api {
                rewrite ^/api/(.*)$ /$1 break;
                proxy_pass http://127.0.0.1:8000;
                proxy_redirect off;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                # proxy_read_timeout 300;
                # proxy_send_timeout 300;
        }

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

2.4 重启Nginx

systemctl restart Nginx

如果没有问题提示说明成功了， 你可以在终端输入systemctl status Nginx 查看运行状态

 

3. 访问网站，大功告成！