本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历
一.准备好vue项目
1.安装vue环境
这部分参考我上篇的博客
https://blog.csdn.net/rongqwe/article/details/111990401
2.打包vue项目
进入你项目的文件夹,找到config文件夹下的index.js文件(config/index.js),打开修改里面assetsPublicPath为 ./(注意一定是build里面的,dev中也有这个配置,dev里的不用修改)
3.打包成dist文件
进入项目文件夹,打开命令行输入
npm run build
这时就可以看到文件夹下有个dist文件了,然后把dist丢到服务器上,这里我用xftp丢上去的
二.在服务器配置Nginx
1.安装Nginx
直接用apt就可以安装了,在linux命令行输入
sudo apt-get install nginx
安装后通过输入nginx -v
可测试是否安装成功
输入
service nginx start
可以启动Nginx服务。
启动后,在网页重输入你服务器ip地址,就可看到Nginx的初始页面。这样nginx安装成功啦
2.修改nginx的配置文件
进入默认的配置文件路径,修改。
可通过如下命令修改,也可以通过xftp找到该文件修改的,这样个人感觉比较方便
vim /etc/nginx/nginx.conf
在 http{ } 中配置一个server如下
注意:跨域问题还是要注意的,如果nginx不进行跨域的配置,虽然项目部署了,也还是访问不了。具体看这个博主的博客https://blog.csdn.net/weixin_42565137/article/details/90578780
3.开放端口
你项目的端口记得要开放,比如我这里8080端口记得要开放,不然访问不了的啊!!我曾经就是漏了这个弱智操作搞了我好久,具体如何开放端口自己百度吧,不过一些基本的端口,服务器还是默认会自动开放的。
三.访问你的vue项目
然后重启nginx,命令行输入 service nginx restart
现在就应该大功告成啦,在浏览器输入 ip:端口号 ,就可以访问到你的vue项目啦。