前端

#前端| 来源: 网络整理| 查看: 265

Vue PC端项目开发/联调环境1. 配置.env.development文件2. 运行3. 连接后端验证测试环境1. 配置.env.test文件2. 运行3.nginx配置4. 连接后端验证生产环境1. 配置.env.production文件2. 打包3.nginx配置4. 连接后端验证

Vue PC端项目

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

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

.env 配置如下

NODE_ENV=productionVUE_APP_PLATFORM_NAME=条码系统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的配置内容，如下：

NODE_ENV=developmentVUE_APP_API_BASE_URL=http://localhost:8166/xz-barcodeVUE_APP_CAS_BASE_URL=http://cas.example.org:8443/casVUE_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的本地开发模式。

yarn serve

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

3. 连接后端验证

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

前端调用后端是跨域请求，需要解决跨域问题后端接口被暴露在外，容易被攻击后端接口请求在nginx上无法记录，无法进行服务请求分析不利于服务的水平扩容操作，nginx可以对服务进行负载均衡。测试环境1. 配置.env.test文件NODE_ENV=productionVUE_APP_API_BASE_URL=/apiVUE_APP_CAS_BASE_URL=http://localhost:8888/casVUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview 重点配置：● NODE_ENV ：值为production ，意味着这是打包环境● VUE_APP_API_BASE_URL ：值为 /api，该值为参数环境下连接的后端api的地址。 2. 运行yarn build:test

3.nginx配置

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

设置nginx配置文件

server { listen 8084; server_name localhost; #access_log /var/log/nginx/host.access.log main; #后台服务配置，配置了这个location便可以通过http://域名/jeecg-boot/xxxx 访问 location ^~ /api { proxy_pass http://localhost:8166/xz-barcode/; proxy_set_header Host localhost; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { root html/xz; index index.html index.htm; try_files $uri $uri/ /index.html; } #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/xz; }}

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

4. 连接后端验证

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

生产环境

1. 配置.env.production文件NODE_ENV=productionVUE_APP_API_BASE_URL=/apiVUE_APP_CAS_BASE_URL=http://cas.example.org:8443/casVUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

2. 打包yarn build

3.nginx配置

同测试环境

4. 连接后端验证

同测试环境

【本文地址】

公司简介

联系我们