vue项目简单部署

由于自己没有服务器，因而是申请的华为云免费服务器

2：申请过服务器以后登录主机，安装nginx,nginx安装命令

apt-get install nginx

启动nginx

service nginx start

查看nginx是否处于启动状态

systemctl status nginx

可以添加配置，让每次打开主机都自动启动nginx

systemctl enable nginx

设置过程

意：如果申请的是华为云的免费云服务器，还要设置一下安全组才能将公网对外访问

这时候去访问公网ip

nginx环境搭建好以后，vue项目进行打包，执行打包命令npm run build,将项目打包

nginx默认代理文件是/etc/nginx/sites-available下的default文件

cd / 进入nginx根目录，在根目录下创建文件夹，mkdir www,进入文件夹，cd www,创建文件index.html，输入命令vi index.html 进入编辑页面，输入hello world,保存退出

进入到/etc/nginx/sites-available目录下，输入vi default命令编辑default文件，新增location配置，输入 location /a {（注意：这里如果配置的是/a,则访问的时候就是ip+/a,配置的是/b,则访问/b，服务器部署多个服务的话就可以配置多个location,访问的时候可以根据配置的location来访问不同的服务）

        alias /www/;

        index index.html;

}

配置完成，输入指令nginx -t 检测配置是否有问题，提示successful则代表没问题

改了nginx配置需要重启nginx,输入指令nginx -s reload重启，再次访问公网可以看到最新内容，如果直接访问ip不带/a,访问的则是root路径下的内容，带/a则是自己配置的内容

准备一个文件传输工具，我这里用的是winscp,将打包好的文件夹（我这里是dist压缩包）拖拽到远端服务器上

服务器解压缩上传的压缩包，解压指令 unzip dist.zip,重启nginx,nginx -s reload，访问即可

注释：如果vue项目打包上传到服务器以后报错，提示找不到static文件夹请看下一pain博客