vue项目打包后部署到nginx

off999 2025-01-08 16:30 15 浏览 0 评论

发现有人问到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启动不了。

nginx的根目录

上一篇：问题:vue项目打包后，放到二级目录无法访问的解决方案
下一篇：构建个人私有云盘:简单步骤一键打造云端存储

vue项目打包后部署到nginx

相关推荐

取消回复欢迎你发表评论:

编写一个自动生成双色球号码的 Python 小脚本

python入门到脱坑输入与输出—str()函数

推荐一款好用的国产桌面软件开发工具Aardio

Python基础编程——赋值语句的高级用法

Python基础之元组、集合、字典

Python启航:30天编程速成之旅(第12天)- 类

python之容器详解——字典

如何用 Python 发送通知到微信（python发送消息到微信）

失业程序员复习python笔记——条件与循环

python 解决cv2绘制中文乱码问题

vue项目打包后部署到nginx

相关推荐

取消回复欢迎 你 发表评论:

编写一个自动生成双色球号码的 Python 小脚本

python入门到脱坑 输入与输出—str()函数

推荐一款好用的国产桌面软件开发工具Aardio

Python基础编程——赋值语句的高级用法

Python基础之元组、集合、字典

Python启航:30天编程速成之旅(第12天)- 类

python之容器详解——字典

如何用 Python 发送通知到微信（python发送消息到微信）

失业程序员复习python笔记——条件与循环

python 解决cv2绘制中文乱码问题

取消回复欢迎你发表评论:

python入门到脱坑输入与输出—str()函数