网站首页 > 博客文章 正文
之前写的文章《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启动不了。
猜你喜欢
- 2024-10-05 Nginx + FastCGI 程序(C/C++) 搭建高性能web service
- 2024-10-05 Docker使用Nginx制作静态文件服务器
- 2024-10-05 使用nginx将服务器升级为https(nginx代理服务器配置)
- 2024-10-05 Nginx Windows详细安装部署教程(nginx安装及配置教程)
- 2024-10-05 Vue实战091:Vue项目部署到nginx服务器
- 2024-10-05 Zabbix4.0企业级搭建实战(1)LNMP之Nginx服务器编译安装
- 2024-10-05 Linux上安装Nginx服务器(linux安装nginx详细步骤)
- 2024-10-05 Nginx 整合 FastDFS 实现文件服务器
- 2024-10-05 Linux中如何简单快速安装nginx以及如何配置
- 2024-10-05 在CentOS上安装nginx服务器(centos7离线安装nginx)
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- googlecloud (64)
- messagesource (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)