Vue项目部署,NGINX配置


1.  vue项目打包

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

npm run build

Vue项目部署,NGINX配置

打包后会生成文件夹dist

Vue项目部署,NGINX配置

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

sudo mv  dist/ /opt/

Vue项目部署,NGINX配置

 

2. 开始配置NGINX

2.1 进入到配置目录下 

cd /etc/nginx//sites-enabled/

Vue项目部署,NGINX配置

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/(.*)$ /\ 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. 访问网站,大功告成!

原创文章,作者:wure,如若转载,请注明出处:https://blog.ytso.com/273511.html

(0)
上一篇 2022年7月11日
下一篇 2022年7月11日

相关推荐

发表回复

登录后才能评论