vite.config.js里面使用环境变量_如何在 vite.config.js 的 proxy 中使用 import.meta.env.vit

一、前言

  考虑到一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，基本路径，服务器代理这种都要更改一遍，这时候就显得很麻烦，所以这里就使用了环境变量

---

提示：以下是本篇文章正文内容，下面案例可供参考

二、使用步骤

1.创建.env文件

  直接在根目录下创建.env后缀的文件，

.env ——全局的，没有设置其他环境变量时，会加载这个文件里的内容，比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行
.env.development ——开发环境下的配置文件，会覆盖.env这个文件里定义的环境变量
.env.production ——生产环境下的配置文件，会覆盖 .env这个文件里定义的环境变量

我这里三个文件的环境变量都是一样的
代码如下（示例）：

# 基础路径
VITE_APP_BASE_URL=/index/

# 接口地址1 
VITE_APP_API1=http://127.0.0.1/1000

1
2
3
4
5
6

2.获取变量

vite.config.ts获取环境变量的方法

const env = loadEnv(mode, process.cwd());   // 获取.env文件里定义的环境变量
//console.log(env);   //变量在命令行里打印出来
1
2

vite.config.ts文件完整代码(我这里是用了上面的两个环境变量)

import path from "path";
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default ({ mode }) => {
  //参数mode为开放模式或生产模式
  //console.log(mode);  // development or product
  const env=loadEnv(mode, process.cwd());   // 获取.env文件里定义的环境变量
  //console.log(env);   //变量在命令行里打印出来
  
  return defineConfig({
    plugins: [vue()],

    //项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/
    base: env.VITE_APP_BASE_URL || '/',
    build: {
      cssCodeSplit: false, //默认ture,将css分割提取到css文件中，false将全部css提取到一个文件里
    },

    resolve: {
      alias: {
        //别名配置
        "@": path.resolve(__dirname, "src"), //配置src的别名
        "@comp": path.resolve(__dirname, "src/components"),
      },
    },
    server: {
      proxy: {
        // 代理配置
        "/api": {
          // target: "http://127.0.0.1/1000", //本地服务器环境后台目录D:\phpstudy_pro\WWW\1000
          target: env.VITE_APP_API1,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

3.部署结果

  我这里创建了一个www.test.com的站点，但是我的代码不放在主域名下面，需要放在子文件夹index里面，所以环境变量里面设置了VITE_APP_BASE_URL=/index/；放主域名下面的话，直接VITE_APP_BASE_URL=/就行

  文件放到index文件夹下面就能访问了，正常使用的话还需要配置 nginx，点击进入到登录 页面，但是刷新之后就变成下面这个样子了。

  在服务器这一块需要配置nginx，vue项目的配置就已经可以了

建议：router.ts路由配置文件建议改成下面这种写法

const base_url = import.meta.env.BASE_URL; //获取vite.config.js配置的base,默认是根目录/
const router = createRouter({
  history: createWebHistory(base_url),
  routes,
});

1
2
3
4
5
6

---

三、总结

  这种一下需要创建多个环境变量文件，改动一下可能会几个变量文件的内容一起更改，一开始会觉得麻烦，但是一个项目后期代码逐渐增多，项目逐渐庞大起来时，这时候用环境变量就显得方便、简单。前期规范好代码结构、语法等等，后面修改、维护、优化代码操作也很容易，在方便自己的同时，也能给他人有良好操作习惯，也便于后人学习，取长补短。