目录一、PC端项目1、 .env.development 文件2、 .env.production 文件3、 .env.staging 文件多环境接口地址不一致 本地开发、测试、生产环境的域名、端口、接口前缀不一样导致本地正常部署后接口调不通。可以在项目里按 环境 区分配置 baseURL通过.env文件 或配置文件做 环境切换保证不同环境都能正确请求。一、PC端项目1、.env.development文件本地开发 dev 环境配置# just a flag ENV development # base api # VUE_APP_BASE_API http://83.0.0.1:9090 VUE_APP_BASE_API http://127.0.0.1:9090 # 这个是处理图片上传问题的ip地址 VUE_APP_FILE_API http://80.0.0.1:8090 # VUE_APP_FILE_API http://81.0.0.1:8090 # VUE_APP_FILE_API http://82.0.0.1:8090 VUE_CLI_BABEL_TRANSPILE_MODULES true # 配置开发常量 # VUE_APP_ 是固定写法, 类似于定义变量 # 使用 VUE_APP_ 开头的变量会被 webpack 自动加载 # 定义请求的基础 URL , 方便跨域请求时使用 # http://localhost:8080 是你要访问的接口地址 # 接口服务地址, 以你自己的为主 # VUE_APP_SERVICE_URL /csdn # 这个是开发文件 # 这个是常量配置文件, 它只在开发环境有效# 页面标题 VUE_APP_TITLE 自动化测试平台 # 开发环境配置 ENV ’development‘ # 自动化测试平台 / 测试环境 VUE_APP_BASE_API /dev-api # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_ODULES true项目实战 移动端同理 # just a flag 本地开发 NODE_ENV development # base api # VUE_APP_BASE_API http://83.12.34.56:9090 VUE_APP_BASE_API http://127.0.0.1:9090 VUE_APP_SERVICE_URL /abcd/xxx2、.env.staging文件测试 环境配置NODE_ENV production outputDir test-dist # just a flag 测试 ENV staging # base api VUE_APP_BASE_API /stage-api # VUE_APP_BASE_API http://12.34.567.89:8080/CS/CF # 图片上传的ip地址 VUE_APP_FILE_API http://80.0.0.1:8090# 页面标题 VUE_APP_TITLE 自动化测试平台 # 生产环境配置 ENV ‘production’ # 自动化测试平台 / 生产环境 VUE_APP_BASE_API /prod-api项目实战 移动端同理 # just a flag 测试 NODE_ENV test # base api VUE_APP_BASE_API http://12.345.67.999:8080 VUE_APP_SERVICE_URL /abcd/xxxapi3、.env.production文件生产 环境配置# just a flag 生产 ENV production outputDir dist # base api VUE_APP_BASE_API /prod-api # VUE_APP_BASE_API http://xiaohuilang/CS # 图片上传的ip地址 VUE_APP_FILE_API http://80.0.0.1:8090 # 使用 VUE_APP_ 开头的变量会被 webpack 自动加载 # 定义请求的基础 URL , 方便跨域请求时使用 # http://xiaohuilang/CS 是你要访问的接口地址 # 这个是生产文件, 也就是上线后这个文件才会生效, 开发的时候只会 .env.development 这个文件生效 # 这个是常量配置文件, 它只在生产环境有效# 页面标题 VUE_APP_TITLE 自动化测试平台 NODE_ENV production # 测试环境配置 ENV ’staging‘ # 自动化测试平台 / 测试环境 VUE_APP_BASE_API /stag-api项目实战 移动端同理 # just a flag 生产 NODE_ENV production # base api VUE_APP_BASE_API http://12.345.67.888:80 VUE_APP_SERVICE_URL /abcd/xxxapi项目实际应用过程中请求访问地址很有可能需要根据跳转过来的网络协议跟请求端口号来实时相对应改变所以这上面的VUE_APP_BASE_API就不能写死了举例src / utils / tools.js/** * 获取当前 IP 端口号 */ const getPath () { let htt window.location.protocol; let host window.location.host; console.log(htt:, htt, host:, host); // htt: http: host: 12.34.56.789:8090 return htt // host; }; export { getPath };src / utils / request.jsimport axios from axios; import { getPath } from /utils/tools; // 全局的 axios 默认值 axios.defaults.timeout 500000; // 请求超时时间 // 在跨域请求时会携带用户凭证是否允许请求携带 Cookie axios.defaults.withCredentials true; // 后端需要带 cookie 过去 axios.defaults.baseURL process.env.NODE_ENV production || process.env.NODE_ENV test ? getPath() process.env.VUE_APP_SERVICE_URL : process.env.VUE_APP_SERVICE_URL; // api 的 base_url // 拦截器的配置是对项目实际使用时的错误提示、token的绑定进行统一处理 // request 拦截器测试系统没有https的协议需要你安装一下证书问题信创环境下的HTTPS 证书可能不受信任导致请求被拦截。我们在开发阶段临时配置代理或忽略证书校验生产环境则确保证书正确安装。后端代码public class IpUtils { public static final String _255 (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?); public static final Pattern pattern Pattern.compile(^(?: _255 \\.){3} _255 $); public static String longToIpV4(long longIp) { int octet3 (int) ((longIp 24) % 256); int octet2 (int) ((longIp 16) % 256); int octet1 (int) ((longIp 8) % 256); int octet0 (int) ((longIp) % 256); return octet3 . octet2 . octet1 . octet0; } public static long ipV4ToLong(String ip) { String[] octets ip.split(\\.); return (Long.parseLong(octets[0]) 24) (Integer.parseInt(octets[1]) 16) (Integer.parseInt(octets[2]) 8) Integer.parseInt(octets[3]); } public static boolean isIPv4Private(String ip) { long longIp ipV4ToLong(ip); return (longIp ipV4ToLong(10.0.0.0) longIp ipV4ToLong(10.255.255.255)) || (longIp ipV4ToLong(172.16.0.0) longIp ipV4ToLong(172.31.255.255)) || longIp ipV4ToLong(192.168.0.0) longIp ipV4ToLong(192.168.255.255); } public static boolean isIPv4Valid(String ip) { return pattern.matcher(ip).matches(); } public static String getIpFromRequest(HttpServletRequest request) { String ip; boolean found false; if ((ip request.getHeader(x-forwarded-for)) ! null) { StrTokenizer tokenizer new StrTokenizer(ip, ,); while (tokenizer.hasNext()) { ip tokenizer.nextToken().trim(); if (isIPv4Valid(ip) !isIPv4Private(ip)) { found true; break; } } } if (!found) { ip request.getRemoteAddr(); } return ip; } }【图片加载失败】GET img error:https://16lifecs.dccnet.com.cn:80/xxxx/xxxapi/file/downFile?fileNameftp123.png 传输协议http ://12.34.56.789/xxxx/xxxapi/file/downFile?fileNameftp123.jpg
Vue 之 .env. 相关文件
目录一、PC端项目1、 .env.development 文件2、 .env.production 文件3、 .env.staging 文件多环境接口地址不一致 本地开发、测试、生产环境的域名、端口、接口前缀不一样导致本地正常部署后接口调不通。可以在项目里按 环境 区分配置 baseURL通过.env文件 或配置文件做 环境切换保证不同环境都能正确请求。一、PC端项目1、.env.development文件本地开发 dev 环境配置# just a flag ENV development # base api # VUE_APP_BASE_API http://83.0.0.1:9090 VUE_APP_BASE_API http://127.0.0.1:9090 # 这个是处理图片上传问题的ip地址 VUE_APP_FILE_API http://80.0.0.1:8090 # VUE_APP_FILE_API http://81.0.0.1:8090 # VUE_APP_FILE_API http://82.0.0.1:8090 VUE_CLI_BABEL_TRANSPILE_MODULES true # 配置开发常量 # VUE_APP_ 是固定写法, 类似于定义变量 # 使用 VUE_APP_ 开头的变量会被 webpack 自动加载 # 定义请求的基础 URL , 方便跨域请求时使用 # http://localhost:8080 是你要访问的接口地址 # 接口服务地址, 以你自己的为主 # VUE_APP_SERVICE_URL /csdn # 这个是开发文件 # 这个是常量配置文件, 它只在开发环境有效# 页面标题 VUE_APP_TITLE 自动化测试平台 # 开发环境配置 ENV ’development‘ # 自动化测试平台 / 测试环境 VUE_APP_BASE_API /dev-api # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_ODULES true项目实战 移动端同理 # just a flag 本地开发 NODE_ENV development # base api # VUE_APP_BASE_API http://83.12.34.56:9090 VUE_APP_BASE_API http://127.0.0.1:9090 VUE_APP_SERVICE_URL /abcd/xxx2、.env.staging文件测试 环境配置NODE_ENV production outputDir test-dist # just a flag 测试 ENV staging # base api VUE_APP_BASE_API /stage-api # VUE_APP_BASE_API http://12.34.567.89:8080/CS/CF # 图片上传的ip地址 VUE_APP_FILE_API http://80.0.0.1:8090# 页面标题 VUE_APP_TITLE 自动化测试平台 # 生产环境配置 ENV ‘production’ # 自动化测试平台 / 生产环境 VUE_APP_BASE_API /prod-api项目实战 移动端同理 # just a flag 测试 NODE_ENV test # base api VUE_APP_BASE_API http://12.345.67.999:8080 VUE_APP_SERVICE_URL /abcd/xxxapi3、.env.production文件生产 环境配置# just a flag 生产 ENV production outputDir dist # base api VUE_APP_BASE_API /prod-api # VUE_APP_BASE_API http://xiaohuilang/CS # 图片上传的ip地址 VUE_APP_FILE_API http://80.0.0.1:8090 # 使用 VUE_APP_ 开头的变量会被 webpack 自动加载 # 定义请求的基础 URL , 方便跨域请求时使用 # http://xiaohuilang/CS 是你要访问的接口地址 # 这个是生产文件, 也就是上线后这个文件才会生效, 开发的时候只会 .env.development 这个文件生效 # 这个是常量配置文件, 它只在生产环境有效# 页面标题 VUE_APP_TITLE 自动化测试平台 NODE_ENV production # 测试环境配置 ENV ’staging‘ # 自动化测试平台 / 测试环境 VUE_APP_BASE_API /stag-api项目实战 移动端同理 # just a flag 生产 NODE_ENV production # base api VUE_APP_BASE_API http://12.345.67.888:80 VUE_APP_SERVICE_URL /abcd/xxxapi项目实际应用过程中请求访问地址很有可能需要根据跳转过来的网络协议跟请求端口号来实时相对应改变所以这上面的VUE_APP_BASE_API就不能写死了举例src / utils / tools.js/** * 获取当前 IP 端口号 */ const getPath () { let htt window.location.protocol; let host window.location.host; console.log(htt:, htt, host:, host); // htt: http: host: 12.34.56.789:8090 return htt // host; }; export { getPath };src / utils / request.jsimport axios from axios; import { getPath } from /utils/tools; // 全局的 axios 默认值 axios.defaults.timeout 500000; // 请求超时时间 // 在跨域请求时会携带用户凭证是否允许请求携带 Cookie axios.defaults.withCredentials true; // 后端需要带 cookie 过去 axios.defaults.baseURL process.env.NODE_ENV production || process.env.NODE_ENV test ? getPath() process.env.VUE_APP_SERVICE_URL : process.env.VUE_APP_SERVICE_URL; // api 的 base_url // 拦截器的配置是对项目实际使用时的错误提示、token的绑定进行统一处理 // request 拦截器测试系统没有https的协议需要你安装一下证书问题信创环境下的HTTPS 证书可能不受信任导致请求被拦截。我们在开发阶段临时配置代理或忽略证书校验生产环境则确保证书正确安装。后端代码public class IpUtils { public static final String _255 (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?); public static final Pattern pattern Pattern.compile(^(?: _255 \\.){3} _255 $); public static String longToIpV4(long longIp) { int octet3 (int) ((longIp 24) % 256); int octet2 (int) ((longIp 16) % 256); int octet1 (int) ((longIp 8) % 256); int octet0 (int) ((longIp) % 256); return octet3 . octet2 . octet1 . octet0; } public static long ipV4ToLong(String ip) { String[] octets ip.split(\\.); return (Long.parseLong(octets[0]) 24) (Integer.parseInt(octets[1]) 16) (Integer.parseInt(octets[2]) 8) Integer.parseInt(octets[3]); } public static boolean isIPv4Private(String ip) { long longIp ipV4ToLong(ip); return (longIp ipV4ToLong(10.0.0.0) longIp ipV4ToLong(10.255.255.255)) || (longIp ipV4ToLong(172.16.0.0) longIp ipV4ToLong(172.31.255.255)) || longIp ipV4ToLong(192.168.0.0) longIp ipV4ToLong(192.168.255.255); } public static boolean isIPv4Valid(String ip) { return pattern.matcher(ip).matches(); } public static String getIpFromRequest(HttpServletRequest request) { String ip; boolean found false; if ((ip request.getHeader(x-forwarded-for)) ! null) { StrTokenizer tokenizer new StrTokenizer(ip, ,); while (tokenizer.hasNext()) { ip tokenizer.nextToken().trim(); if (isIPv4Valid(ip) !isIPv4Private(ip)) { found true; break; } } } if (!found) { ip request.getRemoteAddr(); } return ip; } }【图片加载失败】GET img error:https://16lifecs.dccnet.com.cn:80/xxxx/xxxapi/file/downFile?fileNameftp123.png 传输协议http ://12.34.56.789/xxxx/xxxapi/file/downFile?fileNameftp123.jpg
