vue3+vite实现环境变量配置~

Java资料网推荐vue3+vite实现环境变量配置~这篇文章给大家，欢迎收藏Java资料网享受知识的乐趣

1、作用：在Vite中，我们可以使用环境变量来管理不同环境下的配置。Vite支持使用.env文件来配置环境变量，不同的环境可以使用不同的.env文件来管理配置。

2、创建不同环境的.env文件

在vue3根目录下创建三个文件分别为.env.develoment、.env.test、.env.production

2.1在不同的.env文件中配置相应的环境变量

.env.develoment

NODE_ENV='development'

VUE_APP_OSS_API = '/ossApi'

.env.test

NODE_ENV='test'

VITE_APP_API_URL=''

.env.production

NODE_ENV='production'

VITE_APP_API_URL='http://iblog.ishareread.com'

这里我们主要通过VITE_APP_API_URL变量来区分不同的环境调用不同的接口，在开发环境调用本地接口http://localhost:8000，在测试环境用mock接口，在生产环境调用真实接口。

3、在vue.config.js文件中配置baseurl。

// oss上传
'/ossApi': {
   target: 'baseURL地址', // 目标服务器地址
   changeOrigin: true, // 允许改变 Origin
   ws: true,
   secure: false,
   logLevel: 'debug',
   pathRewrite: {
      '^/ossApi': '', // 重写路径，将 /ossApi 替换为空
   },
},

4、定义类型，在evn.d.ts中

/**
 * 环境变量类型声明
 */
declare namespace NodeJS {
  interface Process {
    env: {
      VUE_APP_OSS_API: string;
    };
  }
}

 

5、api解耦中使用环境变量。

const api_rul = import.meta.env.VUE_APP_OSS_API
//const VUE_APP_OSS_API = process.env.VUE_APP_OSS_API;
export function queryAutograph(params) {
  return request({
    url: `${api_rul}/oss/getSign`,
    method: 'get',
    params,
  });
}

文章来源:https://blog.csdn.net/m0_62626838/article/details/142067700
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！