写在前面

我自己的项目是vue的前端+node.js写的数据接口，服务器选用的是阿里云服务器windows操作系统。记录一下这次体验和学到的东西。

连接云服务器

网上很多方法是借用了软件进行连接和上传文件，或者利用阿里云提供的登录功能。但为了后续上传文件方便，我选择的方法是用win10的远程桌面连接功能。
在连接之前，记得去阿里云的控制台设置一下实例服务器的密码，等一下会用到。

在本地机上，组合键win+R，输入mstsc就可以打开远程桌面连接功能。
输入云服务器的相关内容。上方写云服务器的ip地址
点击下方的显示选项->本地资源->本地设备和资源框下的详细信息->选择驱动器（这一步是为了让云服务器和本机共享磁盘，具体是什么磁盘可以自己设置，便于之后上传文件）
点击连接选项，输入云服务器密码。
这里可能会有一个问题，显示你的凭证不对，有可能是你的云服务器信息输错了（建议自查一下），如果没有输错依旧显示凭证不对，可以参考这篇文章。

云服务器配置

下载nginx 和 node.js，可以网上自己搜一下下载方式，比较简单。
下载连接在这里：nginx node.js

vue 项目处理

打包项目文件：在终端运行npm run build，运行完毕后会产生一个dist文件夹。
将这个dist文件夹复制，黏贴到云服务器上的nginx文件夹->html文件夹下,另外html文件夹下的其他html页面可以删除。
配置nginx
配置文件位置如下

具体的内容含义请参考这篇文章，写的很详细，但如果并不想知道原因，只需要根据你想要启动的项目端口去设置server模块和location模块；主要是listen处应该写监听的端口，root处应写dist文件路径（从html开始）

node.js编写的数据接口处理

尝试了直接整个文件夹复制粘贴，也尝试了传输压缩包再解压，但是结果都是漏文件了，现在还没有找到原因，最后的处理方法如下。
这个部分我是将文件传到github，再在云服务器上安装git，把项目文件下载下来。

小坑

记得把vue项目中的数据请求api修改一下，改为服务器的ip，否则会无法用公网访问页面请求的数据。
一定要在云服务器的安全组中把需要用到的端口设置，否则无法访问。

vue项目上线云阿里服务器相关推荐

快速部署web项目上线云服务器
快速部署web项目上线云服务器一.第一步登录腾讯云 1.登录腾讯云后,先购买或者在最新活动中免费领取一个十五天的云服务器产品 2.然后点击头像 3.在云产品选项中选择你需要的云服务器或轻量级应用服务 ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
【建议收藏】使用 Netlify 教你免费将React/Vue项目上线！（前端自动化部署服务）
背景想必大家做项目的时候都会遇到项目上线问题吧,项目上线,首先会考虑服务器对吧,对于学生党来说倒还好,购买学生服务器不会花很多钱.其次,我一个前端的居然搞着运维的事情?可不可以简便一点,不要那么复杂 ...
Vue项目部署到CentOS服务器
Vue项目部署到CentOS服务器 config/index.js上修改以下部分: 首先是host:'localhost'改为服务器ip assetsPublicPath:'/'改为assetsPub ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
Vue项目上线(阿里云centos7+nginx)
由来自己原来做的一个网易云音乐的项目最近想把它上线,而且服务器也买了好久,因为一直没有学习Linux知识就一直搁置着,近来暑假快到了就想着捣鼓一下,项目github地址,上线地址,阿里云备案也太麻烦 ...
宝塔面板部署vue项目到云服务器上（Nginx服务器）
前言: 之前使用终端安装nginx,后来崩了因为自己宝塔也安了后来服务器重装决定只用宝塔的nginx部署步骤: 1.填加站点 2.第一行随便写一行域名后面删掉就行第二行ip:端口 php版 ...
vue项目打包丢入服务器,浅谈vue项目如何打包扔向服务器
当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 如果是 v ...

vue项目上线云阿里服务器

文章目录