vue项目发布上线

174 阅读2分钟

第一步:项目打包

项目开发完成后,运行npm run build进行打包操作。执行完毕会生成一个dist文件,该文件里的内容即是我们需要上线的内容。

第二步:安装 XShELL 和 XFTP 辅助上线工具

image.png

因为window本身的命令系统不够强大,需要借助类似Xshell这样的脚本对linux服务器进行操控。

image.png 做文件传输,可以把本地的文件传输到linux服务器上。

第三步:连接远程服务器

XSHELL连接服务器: 在右侧窗口输入ssh root@(服务器IP) 回车后弹出SSH用户身份验证,直接输入密码,确定即可。

XFTP连接服务器如下: image.png

XFTP连接完成后可以看对应服务器下的文件目录

必会指令

ls   //展示当前文件下的所有文件
pwd  //显示当前路径
mkdir NewFolder  //创建一个 NewFolder的文件夹
cd NewFolder    //进入到NewFolder这个文件夹下
touch name.txt  //创建一个name.txt的文件

vim name.txt
进入文件后 按键盘的 i 键
然后输入你要修改的内容
按 Esc 键盘键
输入:wq
回车,修改的文件内容就保存好了

 删除指令
rm -rf name.txt  //强制删除 谨慎使用
rm -rf *  //删除当前文件夹下的所有

第四步:发布项目

//一键安装上面四个依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

连接Nginx服务器后一般在/root目录下,但我们的nginx需要发布到/usr/local文件夹下

  1. 因为/root目录和/usr是同级目录 cd ../usr/local
  2. 创建一个文件夹 mkdir nginx
  3. 进入nginx cd nginx
  4. 安装Nginx wget http://nginx.org/download/nginx-1.13.7.tar.gz
  5. 解压 tar -xvf nginx-1.13.7.tar.gz
  6. 进入目录 cd nginx-1.13.7
  7. 执行命令考虑到后续安装ssl证书 添加两个模块 ./configure --with-http_stub_status_module --with-http_ssl_module
  8. 执行 make 命令
  9. 执行 make install 命令
  10. 退到nginx目录下 cd ../
  11. 进入sbin cd sbin
  12. 启动 ./nginx

通过xftp 把dist目录下的文件直接拖拽到 nginx 下的html文件夹下,覆盖原文件即可,刷新页面即可.