vue3.0发布文档

简述：本手册针对vue3.0项目的发布而编写，其中步骤均以实践！
vue3.0发布文档.docx

发布前端项目大致流程：

发布前端项目详细流程：

1. 申请服务器：

前端项目发布必须依赖服务器，因此我们要向运维的部门申请服务器，申请方式在钉钉工作中审批中有相关流程

2. 服务器安装nginx且配置nginx.conf

当我们服务器申请下来以后，如果服务器中没有安装nginx，那么我们可以向运维部门沟通，让其安装nginx或者自己手动安装nginx

2.1 nginx安装步骤

1. 安装相关依赖：

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

2. 下载nginx，并解压到我们创建的文件中

//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
//我们可以在http://nginx.org/download中查看nginx的版本，选择最新的就行
-xvf nginx-1.13.7.tar.g


3. 安装nginx

//进入nginx目录
cd /usr/local/nginx
//执行命令
./configure
//执行make命令
make
//执行make install命令
make install

4. 修改nginx.conf文件
该文件路径：/usr/local/nginx/conf/nginx.conf

当我们进入此文件中，则可以在server字段中查看到图片中的内容


Nginx.conf 配置文件图



项目放置的位置图

图中标红的是专门为项目配置的，因为考虑到服务器上可以回配置很多前端项目，为了可以根据路径快速的访问，因此我们需要上边格式的配置

上边图中我们一定要注意， location “/”后边的文字 要和 root 所指向的文件目录中项目文件名字一致！！！

当我们修改了nginx的配置文件以后，要去/usr/local/nginx/sbin文件夹下去执行 ./nginx -s reload 命令去重启 nginx，否则 配置会不生效！

3. 修改vue项目文件的配置：

修改vue的配置文件的目的在于修改打包输出的文件名字，因为Jenkins会需要我们的打包的文件夹中的内容，如果不配置打包的名字则Jenkins就会找不到相关项目的输出文件。

a) 添加vue.config.js 文件,vue3.0项目默认没有这个文件，需要我们自己添加，添加完以后，在里边填写图片中的内容：

其中 publicPath内容和图中一致就行，outputDir 为我们打包的项目的文件夹的名字

b) 修改router.js文件内容

base 字段名字要和我们打包输出的名字一致！

4. 将项目放到GitLab上

将项目放到GitLab的目的在于可以让Jenkins去拉取代码进行持续的构建，具体的如何放置项目到GitLab上可根据 白爱民写的git实践手册去操作，实践手册文件放置在了confluence上，注意我们上传到GitLab的项目成员一定要加上Jenkins，并且权限设置为master，否则Jenkins无法拉去代码

5. Jenkins创建任务持续化构建

1) 打开Jenkins并登陆进去，创建新任务















2) 输入任务名称，选择自由风格软件项目









npm install //用于安装 项目的依赖我呢间
npm run build //用于打包项目






注：如果我们的服务器是新申请的很大概率 Jenkins上没有添加，这时候，我们就找负责维护Jenkins的人 去让其添加我们的服务器即可！（可以自己添加，但是我忘了步骤了！）



至此，保存然后构建任务就行了！























注意：如果我们无法在构建环境那选择nodejs则需要进行以下步骤进行添加











附：
如果无法选择，则在Jenkins上重新配置