环境变量的配置、mock的使用

一、环境变量的配置

项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。

不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。

于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

开发环境（development）
顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。

测试环境（testing）
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试

生产环境（production）
生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！

1. 项目根目录分别添加 开发、生产和测试环境的文件!

.env.development （开发环境）
.env.production  （生产环境）
.env.test （测试环境）

若要配置可以简写.env.dev，可以在 pack.json中添加

"scripts": {
    "dev": "vite --mode dev",

2. 文件内容

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-api'

NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'

3. 在pack.json中配置运行命令

 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },

4. 获取环境变量

通过import.meta.env.MODE获取环境变量，在main.js中打印查看环境变量

console.log("环境变量", import.meta.env);

控制台运行结果：

5. 环境配置的封装

config>index.js：

// 环境配置封装
const env = import.meta.env.MODE || 'prod'

const EnvConfig = {
    // 开发环境
    dev: {
        baseApi: '/',
        mockApi: ''
    },
    // 测试环境
    test: {
        baseApi: '//test.future.com/api',
        mockApi: ''
    },
    // 生产环境
    prod: {
        baseApi: '//future.com/api',
        mockApi: ''
    }
}

export default {
    env,
    mock:true,
    // 将env的内容解构出来
    ...EnvConfig[env]
}

原文链接：https://blog.csdn.net/LQlove1/article/details/130803801

二、mock的配置及使用

为什么要使用mock?

因为在开发中，后端的接口在项目立项之后，不能立马出来。

前端就可以借助mock来自己模拟数据，这样就可以做到前后端进行同时开发。

不会出现前端一直在等后端接口的状况，能够大大提高开发效率。

1. 创建接口

2. 将接口根地址，放到config>index.js下的mockApi中

const EnvConfig = {
    // 开发环境
    dev: {
        baseApi: '/',
        mockApi: 'https://www.fastmock.site/mock/6b46cfbe37c3fe09a90faf0b12d89bff/api'
    },
    // 测试环境
    test: {
        baseApi: '//test.future.com/api',
        mockApi: 'https://www.fastmock.site/mock/6b46cfbe37c3fe09a90faf0b12d89bff/api'
    },
    // 生产环境
    prod: {
        baseApi: '//future.com/api',
        mockApi: 'https://www.fastmock.site/mock/6b46cfbe37c3fe09a90faf0b12d89bff/api'
    }
}

3、mock的使用

main.js中引入axios和config>index.js

使用axios发送异步请求获取到数据

import axios from 'axios'
import config from './config'

axios.get(config.mockApi + '/login').then((res) => {
    console.log(res);
})