vue3设置环境变量

在src下面创建一个文件 types.env.d.ts

/// <reference types="vite/client" />

//vite 环境变量地址 https://vitejs.cn/guide/env-and-mode.html#env-files
//对env的参数参数定义
interface ImportMetaEnv {
    VITE_MODE_NAME: string,
    VITE_APP_ID: string,
    VITE_AGENT_ID: string,
    VITE_LOGIN_TEST: string,
    VITE_RES_URL: string,
    VITE_APP_TITLE: string
  } 

在根目录下文件tsconfig.json 引入上述文件

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "DOM"
    ],
    "isolatedModules": false,
    "types": [
      "element-plus/global",
    ], //指定全局组件类型
    // "moduleResolution": "node",
    "importsNotUsedAsValues": "remove"
  },
  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ],
}

在根目录下创建环境变量的配置

.env.development
.env.production
.env.test

文件中的内容是

VITE_MODE_NAME=test
VITE_APP_ID=123456
VITE_AGENT_ID=123456
VITE_LOGIN_TEST=true
VITE_RES_URL=/adx-service/
VITE_APP_TITLE=风控管理平台 

package.json的使用 --mode 模式

{
  "name": "adx-rly",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --mode development",
    "build": "run-p type-check build-only --mode production",
    "test": "vite build  --mode test",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "fix": "eslint . --fix .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "element-plus": "^2.2.18",
    "pinia": "^2.0.21",
    "pinia-plugin-persistedstate": "^2.3.0",
    "qs": "^6.11.0",
    "vue": "^3.2.38",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^16.11.56",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/esli

使用 import.meta.env.变量

import axios from 'axios';
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosHeaders, CreateAxiosDefaults } from 'axios';
import qs from 'qs'
import { showMessage } from "./status";
import { ElMessage } from 'element-plus'
import { useAdminStore } from "@/stores/admin";

let axiosInstance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_RES_URL + '/api',
  timeout: 10000,
});
//在axiosInstance基础上封装一个JSON
export let axiosInstanceJSON = (info: CreateAxiosDefaults) => {
  let config = {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json;charset=UTF-8"
    },
    transformRequest: [
      function (data) {
        //如果参数不是字符串 就改为字符串
        if (typeof data !== 'string') {
          data = JSON.stringify(data)
        }
        return data;
      }
    ],
  }
  return axiosInstance(Object.assign(config, info) as AxiosRequestConfig)
};
//在axiosInstance基础上封装一个from
export let axiosInstanceFrom = (info: CreateAxiosDefaults) => {
  let config = {
    headers: {
      Accept: "application/json",
      'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
    },
    transformRequest: [() => {
      let formData = qs.stringify(info.data);
      return formData;
    }],
  }
  return axiosInstance(Object.assign(config, info) as AxiosRequestConfig)
};
//在axiosInstance基础上封装一个from
export let axiosInstanceFromUpload = (info: CreateAxiosDefaults) => {
  let config = {
    headers: {
      Accept: "application/json",
      'Content-Type': 'multipart/form-data'
    },
  }
  return axiosInstance(Object.assign(config, info) as AxiosRequestConfig)
};
// axios实例拦截响应
axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => {
    let { status } = response
    let { data: { code, msg } } = response
    if (status === 200) {
      //如果传递回来code,code（如果是下载则不现在code,data就是下载内容）存在且不是200说明有错误
      if (code && code !== 200) {
        //提示错误警告
        ElMessage.warning(msg);
        console.log('----', response.data)
        showMessage(code);
        //触发接口的reject，这样就可以直接在错误捕获其中获取错误
        return Promise.reject(response)
      }
      return response;
    } else {
      showMessage(status);
      return response;
    }
  },
  // 请求失败
  (error: any) => {
    const { response } = error;
    if (response) {
      // 请求已发出，但是不在2xx的范围
      showMessage(response.status);
      return Promise.reject(response.data);
    } else {
      ElMessage.warning('网络连接异常,请稍后再试!');
    }
  }
);
// axios实例拦截请求
axiosInstance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    //设置token
    let adminStore = useAdminStore();
    if (adminStore.token) {
      console.log('token:', adminStore.token)
      config.headers!.satoken = adminStore.token
    }
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
)