vite项目配置环境变量

环境变量就是会根据当前项目环境 自动切换的变量 这时我们就需要使用到vite配置环境变量了 

// 举一个例子 页面现在有一个h1标题 我希望他在开发环境下显示开发环境 正式环境下显示正式环境
export default function App() {
  return <h1>标题</h1>
}

 vite项目配置编译时环境变量

官网地址 vite官网-环境变量和模式

环境变量文件命名,变量定义

我们需要再文件根目录创建对应的文件名称

.env: 所有环境
.env.development  开发环境
.env.production : 生产环境

我们在页面中创建这三个文件

vite配置环境变量前面需要加上VITE

三个文件内代码分别为

# .env
VITE_A = '123'

//.env.development
VITE_TITLE = '开发'

//.env.production
VITE_TITLE = '生产'

 .env所设置的变量无论什么环境都能访问到 我们定义了一个VITE_A的常量 另外两个文件定义了对应的标题

使用环境变量

页面通过import.meta.env.变量名称来拿到声明的变量值

export default function App() {
  // .env定义的常量
  console.log(import.meta.env.VITE_A)
  // 根据环境变量来切换的标题
  console.log(import.meta.env.VITE_TITLE)
  return <h1>标题</h1>
}

正常使用npm run dev启动

 

在package.json配置一条新的启动命令

"dev2": "vite  --mode production",

使用npm run dev2启动项目

 

现在看到打印的标题已经根据当前环境进行切换

一般我们项目更多的是根据当前状态来配置不同的后端接口地址 我们只需要配置对应的url在对应环境文件当中就好

 项目配置运行时环境变量

这个也是一种解决方案 需要根据我们自己在项目中新增一些逻辑来进行环境的切换

原理就是根据判断页面路径来确定当前环境 如果为本地环境一般都是 localhost:xxxx

如果是测试环境来判断测试路径 剩下的就是生产环境 具体看下面代码

代码实现

/** 
 * 系统配置 环境变量配置
*/

// 定义ts类型 开发 生产 测试
type ENV = 'development' | 'production' | 'test'

// 判断当前环境
let env: ENV = 'development'
// 开发环境
if (location.host.indexOf('localhost') > -1) {
  console.log('开发环境...');
  env = 'development'
}
else if (location.host === '测试地址') {
  console.log('测试环境...');
  env = 'test'
}
else {
  console.log('生产环境...');
  env='production'
}
// mockjs网址
const mockApi = 'http://xxxxxxxmock'

// 环境变量
// 想配置什么都可以直接设置值 也可以设置mock开关 
const config = {
  development: {
    baseURL: '/api',
    mock: false,
    mockApi
  },
  production: {
    baseURL: 'http://localhost:3000',
    mock: false,
    mockApi
  },
  test: {
    baseURL: 'http://localhost:3000',
    mock: false,
    mockApi
  }
}


// 后台管理标题
const admin_title = '商城后台管理系统'
// 抛出对应的环境变量
export default {
  env,
  ...config[env],
  admin_title
}

开发环境 使用 npm run dev启动 

import config from '@/config'
export default function App() {
  console.log(config)
  return <div></div>
}

生产环境我们使用http://192.168.1.124:端口号访问 来模拟一下

这时候也能看出来问题 本地开发如果使用本地network 也会走生产 不会走开发 其实也可以继续加判断条件

mock控制 

封装axios

import axios from 'axios'
// 引入配置
import envConfig from '@/config'
// 创建实例
const instance = axios.create({
  // 通过配置项拿前缀
  baseURL: envConfig.baseURL,
  timeout: 8000,
  timeoutErrorMessage: '请求超时，请稍后再试',
  withCredentials: true
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 判断mock开关
  if (envConfig.mock) {
    config.baseURL = envConfig.mockApi
  } else {
    config.baseURL = envConfig.baseURL
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
export default {
  get<T>(url: string, params?: any): Promise<T> {
    return instance.get(url, { params })
  },
  post<T>(url: string, data?: any): Promise<T> {
    return instance.post(url, data)
  }
}

 页面

import request from './utils/request'
const fn = () => {
  request.post('/user')
}
export default function App() {
  return <button onClick={fn}>点击按钮发送请求</button>
}

 把config中mock改为true

development: {
    baseURL: '/api',
    mock: true,
    mockApi
},

点击按钮

 把config中mock改为false

development: {
    baseURL: '/api',
    mock: false,
    mockApi
},

路径变为/api 

两种好处和坏处

vite配置环境变量

坏处是使用vite配置环境变量 修改环境变量时有时候需要重启服务 不然会有一些问题

好处是环境变量匹配绝对不会有问题

项目配置运行时环境变量

好处是 对前端比较友好 能直接修改 坏处是你需要把匹配规则写的全面一些不然会有点问题