Javascript

nginx部署vue项目

本文主要是介绍nginx部署vue项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录
  • 打包vue项目
  • 转移文件
  • 修改配置文件
  • 重启nginx

打包vue项目

yarn build

转移文件

将打包生成的dist文件夹复制到nginx目中的html文件夹中

修改配置文件

conf 目录下的 nginx.conf 文件

    server {
        listen       3100;
        server_name  127.0.0.1;

        location / {
            root   D:/soft/nginx-1.18.0/html/dist; # 指定vue项目打包的绝对路径
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
# 调接口请求,反向代理,实现跨域
        location ^~ /api/ {
            proxy_pass  http://127.0.0.1:8080/;
        }
    }

重启nginx

cmd窗口 或者 管理员身份的powerShell 执行 nginx -s reload

这篇关于nginx部署vue项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!