vue项目部署到阿里云上详解(一次详细的部署)

首先,买一台云服务器是必要的,我使用的是阿里云服务器CentOS 7.4 64位操作系统。
在整个vue-cli项目上线过程中,我遇到了很多问题。不过,最终圆满解决了,因此在这里记录一下。
遇到的问题:

  • 云服务器连接
  • vue项目打包上线
  • nginx安装配置
  • 本地json数据无法访问
  • vue路由页面无法访问

一、使用Xshell连接云服务器

1、百度下载一个Xshell+Xftp6并安装。
2、打开Xshell,建立与远程服务器的连接
vue项目部署到阿里云上详解(一次详细的部署)_第1张图片
注意:上图的主机就是阿里云上创建的实例的公网ip

3、配置好主机后点击连接,输入登录名和密码,登录名就是购买服务器时输入的登录名和密码。
4、点击确定后即可成功连接到云服务器,连接成功如下图:vue项目部署到阿里云上详解(一次详细的部署)_第2张图片

二、vue项目打包上线

这里有几个注意的点:
1、先在config/index.js把assetsPublicPath: ‘./’,原本是/改成./:
在这里插入图片描述
因为在项目路径下index.html在根目录下,现在要求和static同级;这一步是为了匹配css和js的绝对路径,为了解决页面不显示问题
2、打开==build/utils.js ==文件,在如下位置添加 publicPath: ‘…/…/’

publicPath:'../../'//解决部署到服务器后Element UI图标不显示问题

在这里插入图片描述
3、进行打包,npm run build。
打包完毕本地会生成一个dist文件夹

点击Xftp进行安装
vue项目部署到阿里云上详解(一次详细的部署)_第3张图片安装过程比较简单,这里就不多说,安装完毕再次点击出现下图
vue项目部署到阿里云上详解(一次详细的部署)_第4张图片
将打包好的dist文件夹传输到远程服务器上

三、nginx安装配置

1、下载安装包

cd /usr/local/software (software可能没有,用mkdir创建或者只到local目录下也行)

wget http://nginx.org/download/nginx-1.6.2.tar.gz
(选择一个比较稳定的版本下载即可,或者手动下载后,用xshell传到该目录下也行)

2、解压安装
tar -zxvf nginx-1.6.2.tar.gz -C /usr/local (local这个目录类似于Windows的program目录,所以一些软件可以都安装在这里)
3、下载依赖的库文件

  1. yum install pcre

  2. yum install pcre-devel

  3. yum install zlib

  4. yum install zlib-devel

4、进行configure配置

cd /usr/local/nginx-1.6.2 && ./configure --prefix=/usr/local/nginx

在这里插入图片描述
5、编译安装( cd 到解压好的nginx-1.6.2,这个目录下安装编译)

make && make install

在这里插入图片描述
6、启动Nginx
执行完5步骤后,cd 到/usr/local/nginx目录下。执行ls,可以看到四个目录

conf----配置文件 html----网页文件 logs-----日志文件 sbin------主要二进制程序

启动命令: /usr/local/ngnix/sbin/nginx (无参数) 启动 (-s stop)关闭 (-s reload)重启
在这里插入图片描述
7、查看
查看是否成功 ps -ef | grep nginx (如果能看到两个相邻ID的进程,说明启动成功)

失败的可能 80端口被占用了。 netstat -ano | grep 80
如果成功的话,浏览器访问能看到欢迎页面:(http://服务器的IP:80)在这里插入图片描述

四、Nginx配置

Nginx的作用都是靠着conf/nginx.conf 配置文件发挥的作用。只要能读懂它,会简单的编写,基本算是入门级别了。
在这里插入图片描述
其中user默认为注释,如果部署则开启,根据Nginx当前运行用户进行修改,否则会报错
在这里插入图片描述
vue项目部署到阿里云上详解(一次详细的部署)_第5张图片

五、大功告成

直接访问你的远程ip,就可以看到你刚刚部署的前端项目啦!!!

你可能感兴趣的:(Centos,vue,nginx,vue)