vue前端项目与nginx在服务器配置

   到了将前端的成果配置到服务器上跑跑的时候了,由于后台的同学任务比较重,将前端部署到服务器貌似也是前端同学的事情,于是我就自己大胆尝试了一波(反正服务器不是我的,队友也说了一般搞不蹦的)。我们组打算现在Ubuntu服务器上安装nginx,用它来启动前端项目。所以第一步就是在ubuntu服务器上安装nginx。
  由于没有什么安装经验,我查阅了不少博客,其中有一篇博客(在这里)将每个安装步骤都描述得很详细,看完就基本会安装和使用nginx了(代理功能除外)。其中可能会遇到运行sudo ./nginx -s reload之类的命令报错找不到文件的问题,这个谷歌一下,就知道解决方法了。
  安装好nginx之后,在自己的Vue-cli项目生成静态资源。首先要先修改Vue的配置文件,添加publicPath,这样才能让生成的dist文件夹中的代码能够正确访问到资源。如下图:
vue前端项目与nginx在服务器配置
执行npm run build生成dist文件夹,然后把这个文件夹放服务器上。修改nginx的配置文件,给前端项目分配一个端口。具体的配置文件我参考了这篇博客,以下是它的截图,把listen后面换成要开放的端口,把root后面换成dist文件夹的路径即可。
vue前端项目与nginx在服务器配置