vue项目内网部署流程

由于第一次部署，也是第一次自己用 Nginx , 百度了很久，没有看到想看的步骤，所以作此文以记录，也是给像我一样的人一个大概方向。注：windows系统

1、首先要弄好jar包的运行环境。

安装jdk

详细安装过程引用 jdk的完整安装教程，安装完成后，win+r打开cmd，输入javac 查看是否安装成功
安装redis

详细安装过程引用 windows安装redis，安装完成后，win+r打开cmd，输入redis-cli 查看是否安装成功
安装MySql

详细安装过程引用 MySql安装与使用，安装完成后，如果不想用命令行查看数据库，就安装可视版Navicate
安装Navicate

双击运行 navicat12018_premium_cs_x64.exe 文件，接受协议，一路执行下一步即可完成安装。接下来安装破解补丁，安装破解自行找下教程吧，需要破解文件，我无法提供 emoji
运行步骤

1、导入数据库文件

双击打开 navicat ，打开后如下图所示

点击左上角连接按钮，选择 mysql,弹出如下对话框：
输入连接名 , 输入主机, 输入端口号，用户名密码都输入 root , 点击右下角连接测试，
连接数据库成功后会弹出连接成功提示，然后点击确定关闭提示，在点击确定保存连接。

连接成功后，双击右侧 test,打开数据库，会发现图标由灰色变为绿色，右击 test,选择新建
数据库，输入数据库名称 ycfx,然后点击 ycfx 右击，选择运行 sql 文件，选中 ycfx.sql 所在的
位置，点击开始，等待提示 finish sucessfully 后点击关闭，然后右击 ycfx 选择刷新，就会在
右侧看到刚才导入的数据库中的所有表。
至此数据库就导入完成。
注意：数据库名称必须和 jar 中的配置文件一致，不可以随便输入

2、启动 jar 文件

复制 ycfx.jar 文件到自定义路径，然后在此路径下打开 cmd 窗口，输入指令 java -jar ycfx.jar （jar包名称）回车后等待程序启动完成即可，启动完成后不要关闭该窗口。
下载nginx

详细安装过程引用 nginx下载安装打开浏览器输入 http://localhost:80 或 127.0.0.1:80，默认端口号是80，出现Welcome to nginx!就说明部署成功了！
在这里插入图片描述

配置nginx

详细了解请自行搜索，这里只讲改动

在配置文件中找到“server”标签，在其中添加以下命令来设置你的域名:


server {    
  listen 80;    
  server_name localhost;    
  location / {    
    root  C:/Users/heju2/Desktop/nginx-1.24.0/html/dist/;  //前端项目打包地址
    try_files $uri $uri/ /index.html;
    index index.html;    
  }    
}

如果有域名，将“localhost”替换为你的域名。

可能有的vue项目会连接两个后台服务，甚至多个，所以，在nginx配置时多加一个配置域名就好

 
        location / {
          root   C:/Users/heju2/Desktop/nginx-1.24.0/html/dist/;
   		  try_files $uri $uri/ /index.html;
          index  index.html index.htm;
        }
        location /prod-api/{   
  		  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   		  proxy_pass http://localhost:8080/;
  	    }
  	    location /prod-api/serve/{  // 项目里vue.config.js文件里添加的后台地址，如果还不清楚这里，可以看我上篇文章
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   		  proxy_pass http://192.168.1.234:18002/;
       }