前言

作为前端开发人员，我们不仅要会写代码，优化打包，上线部署也是一个前端工程师必备的技能，这篇文章就教大家从零开始，把一个完整项目打包发布到线上服务器。首先的准备工作就是需要一台云服务器。

项目打包优化

项目的打包

对于项目打包，直接在项目目录输入指令 npm run build
就可以看见项目目录生成了一个名为dist的文件，就是是打包后的文件，将这个文件进行部署就可以
在这里插入图片描述

项目的优化

我们可以利用vue项目管理器查看我们项目可以优化的地方
在cmd中输入vue ui打开项目管理器，打开我们需要打包的项目
任务 -》build -》运行

在这里插入图片描述
等待编译打包成功，目录也会跟上面方法一样出现dist文件
点击分析，就可以查看项目编译相关的信息，从而进行优化。例如我这里element-ui是全部引入，所以内存占比比较到，可以改为部分引入，缩小打包体积，提高运行效率

在这里插入图片描述

项目上线部署

上面有两种方法把项目进行打包，得出dist文件夹，下面我们就需要把这个文件夹发布发到服务器上去，对于部署我这里选择采用nginx进行代理

首先要在服务器上安装nginx，nginx的安装和使用看我这篇文章（下方链接）
服务器安装nginx详细步骤

从这里开始，我默认大家已经安装好了nginx。这里我用了两款连接服务器的工具，xshell和Xftp，使用比较简单这里就不叙述了

上传项目到服务器

使用Xftp连接服务器，然后把我们打包好的dist文件丢到服务器文件夹中去

在这里插入图片描述

配置nginx

下面我们进入服务器中nginx/conf中的nginx.conf，也就是它的配置文件，进行配置，编辑文件
找到http中server的内容进行编写：

listen后填监听的端口号，记得放行该端口
server_name后填服务器的公网地址
location里面root后面填你dist文件存放的位置

server {
        listen       3434;
        server_name  1.xxx.56.xxx;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /root/Student_vue/dist;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

改完之后保存，退回到nginx/sbin目录中，输入命令 ./nginx 运行nginx
然后浏览器访问上面配置的地址 1.xxx.56.xxx:3434

在这里插入图片描述
发现可以进入登录页面，但是点击登录的时候报错
别慌，再次进入到nginx.conf配置文件中，配置接口的代理还有路由
loaction / 中增加一行代码，下面增加location /api/ 配置接口代理

location / {
            root   /root/Student_vue/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
location /api/ {
     proxy_pass http://1.xxx.xx.64:5004/api2/;
}

保存文件，进入nginx/sbin目录，输入指令 ./nginx -s reload 重启nginx服务，访问地址，完全ok

在这里插入图片描述