前端环境变量的使用与原理

一、环境区分

为了避免忘记或错误配置环境，导致项目上线后接口无法访问，所以需要使用环境变量。

1. 开发环境：可能是公司局域网服务器，能用就行。
2. 生产环境：公网服务器，用户需要访问。
3. 测试环境：供测试同学测试，但一般情况下是打包成dist给测试同学换包。

二、常见的项目环境变量的使用

总则-使用.env.环境名字文件去定义，运行命令时指定某一个环境。

1. Vite+vue3

• 存：VITE_变量名=xxx
• 取：import.meta.env.VITE_变量名

创建文件如【.env】:

VITE_GLOBAL=global

【.env.development】:

VITE_BASE_URL=192

• 【.env.production】:

VITE_BASE_URL=112

• 取出环境变量比如在【main.js】中，就可以取出这个对象。:

console.log(import.meta.env);

BASE_URL: "/"
DEV：true
NODE：development
PROD：false
SSR：false
VITE_BASE_URL:"192"
BITE_GLOBAL: "global"

• 如果此时执行打包，则为生产模式:

npm run build

打包结果的js文件中可以搜索到"112"、"production"，但搜不到"192"因为打包后的是生产环境。

2. vue-cli(Webpack+vue2)

• 存: VUE_APP_变量名=xxx
• 取: process.env.VUE_APP_变量名 创建文件如【.env】:

VUE_APP_ABE=llll

创建文件【.env.development】:

VUE_APP_BASE_URL=192

【.env.production】:

VUE_APP_BASE_URL=112

在【main.js】中取出，注意这是一个整体变量，而不是【对象.属性】：

console.log(process.env);

可以得到这个对象:

BASE_URL: "/"
NODE_ENV: "development"
VUE_APP_ABE: "llll"
VUE_APP_BASE_URL: "192"

3. 纯粹webpack打包

存: 通过definePlugins自己定义到全局环境

vue-cli项目中npm run serve是基于webpack封装了一个vue-cli-service命令，无论是webpack还是vite打包，本质都是执行一段node代码，node代码拿到当前环境是什么，比如创建一个test.js并执行"node test.js":

    console.log(process.env);

会得到一个大对象，里边比如APPDATA属性，数据放在哪，但并没有代码表明当前运行这段代码时，环境是什么，所以我们需要忘【process.env】中加入变量。

比如package.json中，设置NODE_ENV这个变量到process.env中，它的值是development，然后运行"node test.js":

"scripts": {
    "dev": "set NODE_ENV=development&&node test.js"
}

此时test.js修改，然后执行"npm run dev"，会得到development:

    console.log(process.env.NODE_ENV);

但这种方式运行存在问题，node根据不同的系统，很多的指令会有变化，比如win下才是set，mac下是export，所以需要引入【cross-env】这个库，来弥补不同平台之间的差距，删除"&&"符号：

"scripts": {
    "dev": "cross-env NODE_ENV=development node test.js"
}

创建文件如【.env】:

dotin=123

要读取.env文件，需要【dotenv】库来支持，在webpack.config.js中配置如下，执行"npm run build"就可以打印出production和123：

require("dotenv").config()
console.log(process.env.NODE_ENV)
console.log(process.env.dotin);
module.exports = {
    mode: "development",
    entry: {
        app: "./app.js"
    },
    output: {
        filename: "./bundle.js"
    }
}

而环境变量相关的内容，只有在打包时才能拿到，业务代码如app.js中是拿不到的，但在vite和cli中都可以拿到，这也需要插件支持,在webpack.config.js中引入，是webpack自带的插件，不需要额外去安装:

webpack.config.js:

require("dotenv").config()
console.log(process.env.NODE_ENV)
console.log(process.env.dotin);
const webpack = require("webpack");
module.exports = {
    mode: "development",
    entry: {
        app: "./app.js"
    },
    output: {
        filename: "./bundle.js"
    },
    // 给插件传一个对象，这个对象内所有内容会传入到业务代码中。
    plugins: [
        new webpack.DefinePlugin({
            a: 999
        })
    ]
}

然后在app.js中打印即可拿到，执行"npm run build",可以在dist下的bundle.js中看到"console.log(999);"，此时就实现了本来只能在node环境读取的内容，现在在业务中也可以读取到。

app.js:

console.log(a);

vite项目中环境变量必须VITE开头，vue-cli项目中必须以VUE_APP开头，这个是如何实现的？

我现在在.env中，有变量webpacktest，那我希望只有变量以webapck开头的才可以注入到process.env中，没有以webapck开头的，就不能加入到aap.js中，当然变量a还是可以在打包代码中完全拿得到，避免透露给客户端看到我们不想给他们看到的信息。

.env:

webpacktest = 1111
a = 123

webpack.config.js:

require("dotenv").config()
console.log(process.env.NODE_ENV)
console.log(process.env.dotin);
// 创建一个对象用于存储以webpack开头的环境变量，并打印出来
let obj = {}
Object.keys(process.env).forEach((key) => {
    if(key.indexOf('webpack')! = -1) {
        obj[key] = process.env[key];
    }
})
console.log(obj)
const webpack = require("webpack");
module.exports = {
    mode: "development",
    entry: {
        app: "./app.js"
    },
    output: {
        filename: "./bundle.js"
    },
    // 给插件传一个对象，这个对象内所有内容会传入到业务代码中。
    plugins: [
        new webpack.DefinePlugin({
            a: 999
        })
    ]
}

然后执行npm run build，可以看到:

production
1111
{ webpacktest: '1111' }

然后把这个对象通过DefinePlugin传给业务代码:

    plugins: [
        new webpack.DefinePlugin({
            "process.env": obj
        })

然后再一次执行npm run build，在dist下的bundle.js中可以看到如下，经过这样的配置，此时的webpack已经达到了和vue-cli一样的效果，vite同理，但不需要cross-env:

bundle.js:

    console.log(1);console.log({webpacktest:1111}),console.log(a);

vite.config.js:

    export default defineConfig({
        define: {
            a: 1234
        },
        plugins: [
        
        ],
        resolve: {
        
        }
    })

然后在业务代码中，就可以通过"console.log(import.meta.env.a);"拿到。