欢迎您访问365答案网,请分享给你的朋友!
生活常识 学习资料

vue项目nginx服务器部署详细流程....

时间:2023-07-17
vue项目nginx服务器部署 (1)前言

将自己做的vue项目部署到服务器上,这里我采用的工具是Nginx,Nginx是一款轻量级的web服务器、反向代理服务器,由于它的内存占用小,启动快,高并发能力强,在互联网项目中广泛应用,本网站是部署到Nginx服务器上,当然也可以选用其他web服务器,这里我选择较为主流的Nginx。

可以把Nginx想象为一个中间商(中间件),我们把网站放到中间商上去,然后中间商把服务器运行起来,就可以把我们的网站用外网可以访问。

(2)服务器安装Nginx

查看服务器上是否有安装Nginx工具:

whereis nginx

出现nginx目录代表安装完成。

安装nginx:

yum install -y nginx

安装完成界面:

(3)启动nginx

启动nginx,命令·如下:

nginx

直接输入nginx即可启动服务,然后打开浏览器,访问服务器ip地址,页面出现不报错即代表启动成功。(注意只有打开nginx才能看到网页,nginx服务未打开则网页报错)

还有这里访问的是http默认端口80。

停止nginx服务,命令如下:

nginx -s stop

重启nginx服务,,命令如下:

nginx -s reload

(4)修改nginx配置

找到nginx配置文件存放位置,命令如下:

whearis nginx

此时目录/usr/sbin/nginx /usr/lib64/nginx /etc/nginx /usr/share/nginx就是nginx配置文件存放的位置。

cd到该目录下并ll查看文件:其中nginx.conf则是默认配置文件

然后用vim编辑nginx.conf配置文件,命令如下:

vim nginx.conf

进入配置文件之后按i进入输入模式进行修改文件,按esc退出输入模式进入命令模式,然后输入:wq退出文件。

其中server对象中的listen是默认的监听端口号80;

其中server.root是用于存放显示的网页,我们需要把vue项目打包输出的dist目录下的网页存放在此目录下,那么之后再在浏览器中输入ip地址后显示的就是我们存放的网页了。

这里我设置了新的存放网页的路径为:/home/www/dist

(5)新建网站文件夹

刚刚我设置了网站存放的文件夹路径为:

/home/www/dist

此时我们就需要在服务器上新建www文件夹:

cd /homemkdir www

我们没有新建dist文件夹,因为我们待会儿vue项目打包就会生成dist文件夹,直接上传即可。

(6)打包部署vue项目

现在就可以把我们的vue项目build之后生成dist目录下的打包输出文件放到我们的nginx.conf的root目录下了(即部署)。

(1)打包网站

使用vue打包命令生成dist文件夹:

npm run biuld

(2)上传至服务器

我们使用ftp工具将dist文件夹上的文件上传至/home/www目录下,当然也可以使用命令:

scp -r dist/ root@ip地址: 路径

scp -r dist/ root@101.43.163.169:/home/www

此时就可以在外网访问自己做的vue项目了。

留下自己做的vue项目后台管理系统(其实用了微前端技术,然后再部署一个子项目太麻烦了,就把子项目给关了,最后呈现的就是只有主项目)。

网站地址(还没买域名):http://101.43.163.169/。

github源码地址,麻烦star一下xdm:https://github.com/Wanghe0428/vue-manager

之前做项目时后台接口关了,所以后台ajax请求不到数据,不能登录,也挺无语的(做项目的时候跟着b站上的up做的,现在他把后台写的接口全关了我吐了!)。

(7)解决刷新路由404问题

当我们切换路由时,然后再刷新页面就会出现404问题。

这是因为我的vue项目是采用了history路由模式,又因为vue是单页面应用,一旦切换路由之后,之前的页面就会不存在,然后你再刷新回到之前的页面就会出现404了。(个人理解)

解决的方法:

将路由模式修改为hash模式(不建议,hash模式#太丑)修改nginx配置

location / { try_files $uri $uri/ /index.html; //解决页面刷新404问题}

到此问题解决!

Copyright © 2016-2020 www.365daan.com All Rights Reserved. 365答案网 版权所有 备案号:

部分内容来自互联网,版权归原作者所有,如有冒犯请联系我们,我们将在三个工作时内妥善处理。