linux（Ubuntu）下Vue部署到Nginx上

本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历

一.准备好vue项目

1.安装vue环境

这部分参考我上篇的博客
https://blog.youkuaiyun.com/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.youkuaiyun.com/weixin_42565137/article/details/90578780

3.开放端口

你项目的端口记得要开放，比如我这里8080端口记得要开放，不然访问不了的啊！！我曾经就是漏了这个弱智操作搞了我好久，具体如何开放端口自己百度吧，不过一些基本的端口，服务器还是默认会自动开放的。

三.访问你的vue项目

然后重启nginx，命令行输入 service nginx restart
现在就应该大功告成啦，在浏览器输入 ip：端口号 ，就可以访问到你的vue项目啦。