vue项目部署到阿里云服务器（纯前端静态页面动态）

双十一新买的阿里云服务器，工作闲暇时摸索部署一个vue前端项目，记录操作

1.新买的阿里云服务器要重置密码，然后配置安全组，下载教育版xshell和xftp免费使用

2.使用xshell连接云服务器，我使用的是阿里云centOs的服务器

正常安全组配置好输入账号密码和远程公网ip就可以链接成功了，（记得阿里云安全组配置完成之后需要重启服务器）

3.安装nginx和nodejs

1）安装nodejs命令

cd /usr/src
wget http://nodejs.org/dist/v0.10.18/node-v0.10.18.tar.gz

2）安装nginx命令

// 安装nginx
sudo yum install nginx -y
// 启动nginx
nginx 
// 把nginx配置成全局命令
ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/
// 查看nginx配置位置
nginx -t
// 查看nginx启动状态
ps -ef | grep nginx
// 重启nginx
nginx -s reload

启动成功后在页面输入ip和端口能够访问到nginx欢迎页，重启后访问不成功我遇到的是用的账号不对，nginx默认是nginx用户，我用的是root用户，直接在nginx.config里面修改用户就可以了

4.在nginx创建一个app文件夹

mkdir app

5.使用xftp把vue打包好的项目放在app目录下

1）部署项目多个项目时，vue打包注意事项
配置文件

// vue.config.js
module.exports = {
     
  // publicPath: isPro ? '/vue/' : './', // 公共路径
  publicPath: '/vue/'
}
// router
const router = new VueRouter({
     
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

2）打包后dist包放在app目录下新建一个vue-project文件夹可以放多个文件部署多个项目
3）更改nginx配置，使用nginx -t查看配置项的位置

nginx -t

// 使用命令进入配置项
vim etc/nginx/nginx.config
// 更改的内容
location /paper-generation {
     
   alias /app/vue-peoject/;
   try_files $uri $uri/ /vue-peoject/index.html;
   index index.html;
}
// 注意使用alias后面需要加/,使用root不用加/

配置完后重启nginx

nginx -s reload

正常情况下此时浏览器输入ip:端口/vue-project就可以访问到你部署的项目了