专业的编程技术博客社区

网站首页 > 博客文章 正文

vue项目打包后部署到nginx(vue打包 nginx)

baijin 2024-10-05 13:36:48 博客文章 5 ℃ 0 评论

之前写的文章《vue接通后端api以及部署到服务器》

发现有人问到vue项目打包后dist文件夹怎么部署?所以,就有了这篇文章,也是对之前写的文章做一个补充吧!

1.要下载nginx,然后解压。这里以windows版本为例,.zip后缀的才是windows版本。下载地址:(http://nginx.org/en/download.html)

解压后,运行cmd,去到nginx根目录,执行启动命令

nginx在windows系统下有三个常用的命令

启动命令 start nginx
强制停止命令 nginx.exe -s stop
重启命令 nginx.exe -s reload

为了验证nginx是否启动成功,可以到浏览器访问http://localhost:80,看到下面的页面,说明启动成功

2.接下来,就要进行配置了,找到conf文件夹下的nginx.conf,打开就可以进行编辑配置,打开之后看到前面带有“#”号,都是一些注释,删掉也不影响配置,删掉之后看起来也更加简洁,不过删的时候要小心,只能掉那一行前面带有“#”号的。

3.具体配置和说明如下:

#user  nobody;
worker_processes  1;



events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8000; #这里配置的是端口
        server_name  localhost;

        location / {
            root   E:\aaa\dist; #这里配置vue项目打包后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;
        }

    }

}

配置好后,保存。去cmd运行重启命令,访问http://localhost:8000,就可以看到你项目运行起来了。

4.总结

dist文件夹的路径上的文件名不要有空格,不要有中文,填写路径直接复制过去,不要手写,不然容易出错,导致nginx启动不了。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表