服务器部署vue项目
0- 介绍:使用的服务器:腾讯云使用的系统:centos7.6(centos8坑太多)使用的用户:root1- 先将vue项目打包在项目中执行打包命令,执行完成后文件夹中会出现一个 dist 文件夹npm run build2- 在Windows上安装nginx注意是windows版本的,目的在于测试打包的项目是否能够正常显示(1)将下载的包解压后,进入该文件夹,输入cmd打开命令窗口(2)将 刚
0- 介绍:
使用的服务器:腾讯云
使用的系统:centos7.6(centos8坑太多)
使用的用户:root
1- 先将vue项目打包
在项目中执行打包命令,执行完成后文件夹中会出现一个 dist 文件夹
npm run build
2- 在Windows
上安装nginx
注意是
windows
版本的,目的在于测试打包的项目是否能够正常显示
(1)将下载的包解压后,进入该文件夹,输入cmd打开命令窗口
(2)将 刚刚打包的dist文件夹中的文件复制到 html 文件夹中。(注:需要先将html文件夹中的文件删除掉)
(3)测试
3.0 使用命令启动服务
3.1 如果你的 80端口 没被占用的话,直接在浏览器地址栏输入 localhost,正常输出网页跳到第三步即可
3.2 如果你的 80端口 被占用的话,会显示404
3.3 此时需要将配置文件修改下地址
3.4 在浏览器地址栏输入 localhost:880进行测试,成功即可部署到线上
3.5 将 nginx服务 关闭,附上其它命令
3- 将dist文件夹上传到 gitee码云上
4- 在服务器中下载文件
(1)使用putty连接服务器
(2)安装git包管理工具
yum -y install git
(3)下载刚刚上传到码云上的dist文件夹
# 下载文件夹(将后面的地址换成你的)
cd ~
git clone https://gitee.com/ma_zipeng/vue-project.git
# 查看是否下载成功
ls
5- 安装nginx,查看这篇文章:linux安装nginx
(1)将整个文件夹移动到 nginx
的包下面去(你如果参考了我的文章文件夹位置应该跟我一样,如果你自己安装了,修改成你存放的位置)
cd ~
mv vue-project /mine/nginx
cd /mine/nginx
ls
(2)进入配置文件进行配置,输入:wq
保存退出
vi /mine/nginx/conf/nginx.conf
# 将下面代码粘贴到配置文件中
#---------------------
server {
listen 4545; # 监听端口(你可以修改成你的)
server_name localhost; #监听地址
location / {
root vue-project; #根目录
# index vv.txt; #设置默认页
#proxy_pass http://mysvr; #请求转向mysvr 定义的服务器列
表
#deny 127.0.0.1; #拒绝的ip
#allow 172.18.5.54; #允许的ip
}
}
#---------------------
(3)配置完成后,输入命令重启nginx服务
cd /mine/nginx/sbin
./nginx -s reload
# 查看是否启动
ps -ef | grep nginx
6- 配置服务器防火墙
添加 4545端口(刚刚配置的端口号即可)
输入地址测试:ip地址+端口号
7- 完结撒花
编辑 | sishen
来源 | 前端兔
公众号 | 前端兔
关注公众号查看更多前端知识分享~~
更多推荐
所有评论(0)