Vue PC端 项目

注意，如下图所示，Vue项目目录下config文件的index.js不要配置固定URL地址，特别是 window._CONFIG['domianURL']这一配置。
image.png
环境文件如下图：
image.png
环境文件

  • .env
  • .env.development ：开发模式（本地开发、联调）下的配置
  • .env.production：生产模式（即正常打包）下的配置
  • .env.test：测试环境（测试版打包发布）下的配置

.env 配置如下

  1. NODE_ENV=production
  2. VUE_APP_PLATFORM_NAME=条码系统
  3. VUE_APP_SSO=false

配置参数说明：

  • NODE_ENV ：打包环境
  • VUE_APP_PLATFORM_NAME ：平台名称
  • VUE_APP_SSO ：是否启用单点登录
  • VUE_APP_API_BASE_URL ：后台api调用地址
  • VUE_APP_CAS_BASE_URL ：单点登录地址

  • VUE_APP_ONLINE_BASE_URL ：线上浏览地址

    开发/联调环境

    1. 配置.env.development文件

    .env.development的配置内容，如下：

    1. NODE_ENV=development
    2. VUE_APP_API_BASE_URL=http://localhost:8166/xz-barcode
    3. VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
    4. VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

    重点配置：

  • NODE_ENV ：值为development ，意味着这是开发模式

  • VUE_APP_API_BASE_URL ：值为 http://localhost:8166/xz-barcode ，该值为开发环境下连接的后端api的前缀地址

2. 运行

执行如下命令，进入Vue的本地开发模式。

  1. yarn serve

运行成功后，如下图显示应用运行地址
image.png

3. 连接后端验证

进入本地应用开发运行地址，使用登录功能测试连接（下图所示），请求后端的地址前缀是我们在.env.development 文件里 ，参数 VUE_APP_API_BASE_URL 的值
image.png
前端配置后端接口的直连地址，这样子前端可以在测试时可以直接访问对应的后端地址，避免了转发请求的麻烦，便于调试使用，但是请勿在生产发布环境直接配置后端接口。
生产环境直接配置后端接口地址的坏处：

  1. 前端调用后端是跨域请求，需要解决跨域问题
  2. 后端接口被暴露在外，容易被攻击
  3. 后端接口请求在nginx上无法记录，无法进行服务请求分析
  4. 不利于服务的水平扩容操作，nginx可以对服务进行负载均衡。

    测试环境

    1. 配置.env.test文件

    1. NODE_ENV=production
    2. VUE_APP_API_BASE_URL=/api
    3. VUE_APP_CAS_BASE_URL=http://localhost:8888/cas
    4. VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
    重点配置：
    ● NODE_ENV ：值为production ，意味着这是打包环境
    ● VUE_APP_API_BASE_URL ：值为 /api，该值为参数环境下连接的后端api的地址。

    2. 运行

    1. yarn build:test
    image.png
    image.png
    image.png

3.nginx配置

把打包好的前端文件夹dist复制到nginx路径下html文件夹下，并且重命名为xz。

设置nginx配置文件

  1. server {
  2.     listen       8084;
  3.     server_name  localhost;
  4.     #access_log  /var/log/nginx/host.access.log  main;
  5.     #后台服务配置，配置了这个location便可以通过http://域名/jeecg-boot/xxxx 访问        
  6.       location ^~ /api {
  7.             proxy_pass              http://localhost:8166/xz-barcode/;
  8.             proxy_set_header        Host localhost;
  9.             proxy_set_header        X-Real-IP $remote_addr;
  10.             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
  11.       }
  12.     location / {
  13.         root   html/xz;
  14.         index  index.html index.htm;
  15.             try_files $uri $uri/ /index.html;
  16.     }
  18.     #error_page  404              /404.html;
  19.     # redirect server error pages to the static page /50x.html
  20.     #
  21.     error_page   500 502 503 504  /50x.html;
  22.     location = /50x.html {
  23.         root   html/xz;
  24.     }
  25. }

这里location后的 /api，对应Vue里环境文件配置VUE_APP_API_BASE_URL的值，也就是前端的 /api/aaaa…的请求都会被nginx转发到 proxy_pass设置的路径/aaaa…

4. 连接后端验证

image.png
image.png
后端的调用日志，如下图
image.png
登录系统后也是能正常调用后端接口
image.png

生产环境

1. 配置.env.production文件

  1. NODE_ENV=production
  2. VUE_APP_API_BASE_URL=/api
  3. VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
  4. VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

2. 打包

  1. yarn build

3.nginx配置

同测试环境

4. 连接后端验证

同测试环境