Vue项目打包上线

113 阅读1分钟

软件

我使用的是Xshell和Xftp这两个软件

image.png

服务器

首先我们需要去购买一个服务器用软件去连接服务器的地址
Xshell链接服务器地址

image.png image.png

Xftp链接服务器地址

image.png

创建night文件

我们连接上了服务器地址后需要在服务器里面创建一个名为night的文件夹
我们需要在Xshell中输入命令
安装nvm:wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

链接、usr/local:cd /usr/local

npm install pm2

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

mkdir nginx

cd nginx

wget http://nginx.org/download/nginx-1.20.1.tar.gz

tar -zxvf nginx-1.20.1.tar.gz

cd nginx-1.20.1

./configure

make

make install

cd /usr/local/nginx/sbin

./nginx

打包项目,把打包好的项目放到night里面(html)

打包项目

我们在创建完night文件以后是需要将自己需要上线的项目进行打包,我是用的是VsCode
我们需要再终端输入 npm run build 命令行进行打包
打包完毕以后我们的项目文件夹里面会出现一个名为dist的文件夹这里面就是我们打包好的项目

image.png

上线

打包完毕以后我们打开打包好的项目也就是打开dist文件夹
将里面的文件拖拽到连接的服务器地址里面的/usr/local/night/html文件里面

image.png

image.png

然后去浏览器里面访问我们的服务器地址就可以看到我们写的项目啦