vite配置跨域和环境变量

vite配置跨域和环境变量

• 环境变量
• 跨域

环境变量

1.新建.env.development文件和.env.production文件

• .env.development

ENV = 'development'
VITE_APP_BASE_API = '' // 测试访问路径

• .env.production

ENV = 'production'
VITE_APP_BASE_API = ''正式访问路径

经过自己测试发现只能是VITE开头的变量名

跨域

配置基础请求地址

import HttpClient, { HttpClientConfig } from "axios-mapper";
const https = (hasToken: Boolean = true) => {
  const config: HttpClientConfig = {
    baseURL: "/api",
    headers: {
      token: "",
    },
  };
  return new HttpClient(config);
};

export default https;

在vite.config.ts文件中添加跨域

    server: {
      proxy: {
        "/api": {
          target: env.VITE_APP_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },

在vite.config.ts文件中不能直接使用import.meta.env

import vue from "@vitejs/plugin-vue";
import { loadEnv } from "vite";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    server: {
      proxy: {
        "/api": {
          target: env.VITE_APP_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  };
};