首先，买一台云服务器是必要的，我使用的是阿里云服务器CentOS 7.4 64位操作系统。
在整个vue-cli项目上线过程中，我遇到了很多问题。不过，最终圆满解决了，因此在这里记录一下。
遇到的问题：
- 云服务器连接
- vue项目打包上线
- nginx安装配置
- 云服务器node的安装
- 本地json数据无法访问
- vue路由页面无法访问
一、使用Xshell连接云服务器
- 百度下载一个Xshell并安装，下面是我的Xshell6+Xftp6百度云下载地址。
链接：https://pan.baidu.com/s/1P63qVspQh_GyfKab70izXQ 提取码：1385 - 双击打开Xshell，并新建一个连接
注意：上图的主机就是阿里云上创建的实例的公网ip，如下图：
- 配置好主机后点击连接，输入登录名和密码，登录名就是购买服务器时输入的登录名和密码。
- 点击确定后即可成功连接到云服务器，连接成功如下图：
二、vue项目打包上线
-
当我们在本地完成项目开发，可以成功访问项目页面时，运行
npm run build命令，可以看到项目下有一个dist文件夹，这就是vue项目打包后的文件。 -
在Xshell中点击xftp工具图标可打开文件界面。再次输入密码后可看到服务器端的文件夹目录。
-
把本地打包好的文件放到服务器中，我是放到opt目录下vue-website-pro项目下的，vue-website-pro是我的项目名称。
当我们按照上面步骤打包上线后，访问公网ip，是没法看到页面的。这是因为我们不可能通过一台电脑的ip就去访问电脑的文件，云服务器相当于就是一台电脑。所以我们还需要配置服务器代理，我是通过配置nginx实现的，除了nginx还有其他很多服务器也可以实现。如apache等。
三、nginx安装配置
- 在Xshell终端，也就是命令行窗口，输入命令
yum install nginx，当需要确认时输入”y“回车。 - 安装完成后，输入
service nginx start启动nginx服务。 - 通过命令
nginx -t查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下
- 在命令行输入命令
cd /etc/nginx切换到nginx目录下，再输入cat nginx.conf可查看当前nginx配置文件。 - 在nginx目录下，输入
vim nginx.conf进入nginx配置编辑模式，然后按键盘 i 键，当命令行左下角出现-- INSERT-- 的时候，通过鼠标上下键进行文件修改，具体配置如下图：
注意：关于api的location配置，是对后台api接口进行的配置，这里可暂时不做此配置。
这里监听的80端口 listen 80，所以我们还需要再阿里云控制台开放80端口，不然还是无法访问。
- 当完成Nginx配置文件的修改后，按键盘ESC键退出编辑模式，然后输入
:wq并回车，保存修改并退出。 - 修改完nginx配置文件后，需要输入
nginx -s reload重启nginx配置。这里如果重启失败，可输入nginx -c /etc/nginx/nginx.conf，然后再次重启。
四、云服务器node的安装
如果要在云服务器上使用node，则我们需要通过命令的方式安装node。
- 打开Xshell并连接到云服务器
- 输入命令
wget https://nodejs.org/dist/v10.8.0/node-v10.8.0-linux-x64.tar.xz回车，等待安装。注意，前面的链接中的v10.8.0是node版本号，可修改版本号安装子集需要的node版本。 - 安装完成后，输入命令
tar xvf node-v10.8.0-linux-x64.tar.xz回车进行解压操作。 - 输入
mv node-v10.7.0-linux-x64 /usr/local/node回车， mv命令移动并改名。此时可切换到/usr/local/node目录下，使用ls命令查看下面的文件。 - 输入命令
vi ~/.bash_profile进入.bash_profile文件的编辑，按i开始编辑，然后在文件的export PATH前一行添加PATH=$PATH:/usr/local/node/bin添加完成后按:wq退出并保存文件。 - 运行
source ~/.bash_profile命令。 - 此时输入命令
node -v和npm -v可查看node和npm命令是否配置成功。如显示了版本号则表示安装成功。
五、解决本地json数据无法访问问题
我的vue项目中使用了node加载了本地json文件中的数据，所以在项目打包上线后，页面可以显示，但是数据没有显示出来。这是因为我读取的本地db.json中的数据，自己写了一个api接口。
所以，这里还需要配置下nginx后台服务器地址，我的处理方式是：
- 通过xftp将自己的后台server文件上传上去，因为使用express和一些第三方模块，也将package.json文件一并上传了。
- 切换到项目目录下，使用
npm install命令安装第三方模块。安装完成后，会发现项目文件夹下多了一个node_modules文件夹。 - 只是上传了文件夹还不够，我们还需要配置nginx后台服务器地址，按照上面（三）中配置nginx的步骤对nginx.config文件进行编辑，添加一个location。如果再上面配置Nginx的时候已经添加了可以不用再添加。
- 上图中的
location ~/api/双斜杠中间的api就是server文件中定义的接口apiServer.use('/api', apiRouter); - proxy_pass 是后台服务器地址，因为是获取本地json数据，则域名写的是http://127.0.0.1,端口号8081是server文件中监听的端口
apiServer.listen(8081， fn)。
- 配置好nginx并保存后，重启nginx，使用上面的命令重启nginx。
- 要是node写的后台接口生效，我们需要使用
node index.js运行node文件，但这样当我们关闭终端的时候，node后台将停止，所以我们需要安装forever来让其永久运行。
- 安装：
$ npm install forever -g - 启动：
$ forever start app.js - 关闭：
$ forever stop app.js - 输出日志和错误：
$ forever start -l forever.log -o out.log -e err.log app.js - 其他关于forever的使用请参考forever的github地址
六、解决vue路由页面无法访问问题
通过上面的步骤配置好了nginx并将项目打包上线后，我们可以直接访问阿里云外网地址访问我们的vue项目页面了，但我发现又出现了一个问题，vue项目的页面访问时通过vue-router来控制的，结果我点击页面链接后，路由页面出现的是nginx not found。其实，解决方法vue-router的官网已经有了明确的说明，我们只要在nginx.config文件中加入下面的代码即可：
如果再（三）中nginx配置的时候，已经加上了此配置则无需再加。
如果你使用的是其他服务器，如apache等，vue-router官网也有解决方案，详细请参考链接：vue-router后端配置
此时，再通过阿里云的公网ip访问，就可以看到我们的项目啦，啦啦啦啦~
欢迎访问我的阿里云网址！ http://47.105.134.120/
