vue项目打包上线

100 阅读1分钟

发布服务器

  1. 完成项目编写后运行打包命令

package.json中配置"report": "vue-cli-service build --report"

npm run build

image.png

运行后生成dist文件夹

  1. 需要借助Xshell和xFTP来上传

image.png

image.png

  1. 连接远程服务器

image.png

写入个人腾讯云# 轻量应用服务器的IP地址

然后输入用户名密码后点击连接即可成功连接

  1. 操作Xshell

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

因为/root目录和/usr是同级目录 cd ../usr/local

mkdir nginx 创建一个文件夹

cd nginx

//下载tar包

wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz

//进入nginx目录

cd /usr/local/nginx

//进入目录

cd nginx-1.13.7

//执行命令 考虑到后续安装ssl证书 添加两个模块

./configure --with-http_stub_status_module --with-http_ssl_module

//执行make命令

make

//执行make install命令

make install

//退到nginx目录下

cd ../

//进入sbin

cd sbin

//xFTP中查看nginx下的文件找到html文件

image.png

  1. 将项目中生成的dist目录下的文件拖拽到html文件中,覆盖即可

浏览器输入腾讯云IP地址,项目一致即上线完成!!