Vue项目打包部署

本系统Vue项目是在vue-admin-template基础上开发的，下面说下其打包部署的基本流程。

系统页面截图：

Vue打包前的准备工作

查看 .env.production文件的配置，本文与 .env.development 保持一致，如下图：

由于在开发使用了反向代理在请求接口时加了个/api前缀，在部署时要使用nginx代理做映射

Vue 打包

npm run build:prod

打包成功后生成dist文件夹。

将dist上传到服务器

1. 将dist文件夹达成压缩包，如：dist.zip
2. 将dist.zip上传到服务器，可以使用 rz 命令
3. 上传完成后解压dist.zip, 可以使用 unzip dist.zip 命令

nginx 配置修改

使用whereis nginx 查看nginx配置文件的位置

进入 /etc/nginx 目录

cd /etc/nginx

修改nginx 配置

vim nginx.conf

主要配置如下几项：

1. 监控端口listen，本系统是80
2. 服务地址server_name，可以配置域名或公网IP， 本系统是公网IP：129.211.26.244
3. 静态文件访问配置

location / {
       root /opt/ocean/web/dist; # Vue应用构建后的静态文件目录
        try_files $uri $uri/ /index.html; # 用来支持Vue-router的history模式
        index index.html index.htm;
}

4. 后端接口代理配置， 这里要求前端接口/api一致

location /api {
 proxy_pass http://10.0.4.15:8000/;
}

注意：这里要使用内网地址

重启nginx

sudo nginx -s reload