之前写的文章《vue接通后端api以及部署到服务器》
发现有人问到vue项目打包后dist文件夹怎么部署?所以,就有了这篇文章,也是对之前写的文章做一个补充吧!
1.要下载nginx,然后解压。这里已windows版本为例,.zip后缀的才是windows版本。下载地址
解压后,运行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启动不了。