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

绝地灬酷狼 2023-03-13 13:07 16阅读 0赞

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

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

### 一、使用Xshell连接云服务器 ###

1、百度下载一个[Xshell+Xftp6][Xshell_Xftp6]并安装。  
2、打开Xshell,建立与远程服务器的连接  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70]  
**注意：上图的主机就是阿里云上创建的实例的公网ip**

3、配置好主机后点击连接，输入登录名和密码，登录名就是购买服务器时输入的登录名和密码。  
4、点击确定后即可成功连接到云服务器，连接成功如下图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70 1]

### 二、vue项目打包上线 ###

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

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

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

点击Xftp进行安装  
![在这里插入图片描述][20200512221700934.jpg]安装过程比较简单，这里就不多说，安装完毕再次点击出现下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70 2]  
将打包好的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

![在这里插入图片描述][20180403165135209]  
5、编译安装（ cd 到解压好的nginx-1.6.2，这个目录下安装编译）

> make && make install

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

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

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

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

### 四、Nginx配置 ###

Nginx的作用都是靠着conf/nginx.conf 配置文件发挥的作用。只要能读懂它，会简单的编写，基本算是入门级别了。  
![在这里插入图片描述][70]  
**其中user默认为注释，如果部署则开启，根据Nginx当前运行用户进行修改，否则会报错**  
![在这里插入图片描述][20190814150734815.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70 3]

### 五、大功告成 ###

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

[Xshell_Xftp6]: https://xshell.en.softonic.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70]: /images/20230312/b55d4937508e4cf6a2752a4d3af3ce19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230312/0ee9b6d7e7ac43639441d00411b64941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190830184953978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190830192619889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70
[20200512221700934.jpg]: https://img-blog.csdnimg.cn/20200512221700934.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200512221813113.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ==,size_16,color_FFFFFF,t_70
[20180403165135209]: https://img-blog.csdn.net/20180403165135209
[20180403165259201]: https://img-blog.csdn.net/20180403165259201
[20180403165435137]: https://img-blog.csdn.net/20180403165435137
[20180403165545204]: https://img-blog.csdn.net/20180403165545204
[70]: https://img-blog.csdn.net/20180920151421670?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcyMzEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[20190814150734815.png]: https://img-blog.csdnimg.cn/20190814150734815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200512220628948.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3MjEzOQ==,size_16,color_FFFFFF,t_70