Vue 之 .env. 相关文件

目录

一、  .env.development  文件

二、  .env.production  文件

三、 .env.staging  文件

---

一、PC端项目

1、 .env.development  文件

# 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/xxx'

---

2、 .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'

---

3、 .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/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.js

import 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 拦截器

---