编译打包时，如何使用env文件

Question

上文件代码，具体代码最后有地址。

**问题已经解决，代码已经可用，有需要的可参考。
请为被采纳者点赞。
有更好的方法，请回复。**

.env

DB_HOST=localhost
DB_NAME=TEST
DB_USER=root
DB_PASS=tttttt
port=3306

DOMAIN_WWW=www.domain.com
DOMAIN_API=api.domain.com

gulpfile.js

const {src, dest, parallel, series, task} = require("gulp");

require('dotenv').config({
    path: './env/.env'
})

const json = {
    host: process.env.DB_HOST,
    databaseName: process.env.DB_NAME,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
    port: process.env.port
}

const test = (done) => {// OK
    console.log(json)
    done()
}

const outfile_test = (done) => {// 让生成到 dist 目录下的 test.js 文件，可以直接在浏览器客户端使用
    src('./src/test.js')
        .pipe(dest('./dist/'))
    done()
}

exports.test = test
exports.outfile_test = outfile_test

common.js

export const domain = {
    'www': 'www.domain.com',
    'api': 'api.domain.com',
}

export const envDomain = [
    {
        'www': process.env.DOMAIN_WWW,
        'api': process.env.DOMAIN_API,
    }
]

test.js

import {domain, envDomain} from "./common";

function funTest() {
    console.log(domain);
    console.log(domain.www);
    console.log(envDomain);
    console.log(envDomain.www);
}

function funTest_2() {
    const www = process.env.DOMAIN_WWW;// 让生成的文件中，这2个值变成 env 文件中对应的值
    const api = process.env.DOMAIN_API;// 让生成的文件中，这2个值变成 env 文件中对应的值
    console.log(www);
    console.log(api);
}

代码地址 https://github.com/ZhangCheng...

问如何能让打包出来的js文件中的 env 变量成为对应的值？

目标就是让js文件中的一些变量可以有env文件控制。

Answer 1

const gulp = require('gulp');
const map = require('map-stream'); // 没装的记得先装它

const DOMAIN_WWW = process.env.DOMAIN_WWW;
const DOMAIN_API = process.env.DOMAIN_API;

gulp.task('default', async function() {
    await gulp
        .src('src/test.js') // 还有别的文件要替换的的也加上
        .pipe(map(function(file, done) {
            let content = file.contents.toString();
            // 就改两处，剩下的自己加上一下
            content = content.replace(/process.env.DOMAIN_WWW/g, `'${DOMAIN_WWW}'`);
            // 替换结果的前后是要加上引号的，这样最后才是 JS 里的字符串字面量
            content = content.replace(/process.env.DOMAIN_API/g, `'${DOMAIN_API}'`);
            // 如果是 node 10.0 之前的版本，Buffer.from(content) 要改成 new Buffer(content)
            file.contents = Buffer.from(content);

            done(null, file);
        }))
        .pipe(gulp.dest('dist'));
});

本质上就是字符串替换，怎么在构建时从环境变量文件里读取看来你已经会了，那剩下的就是在构建时把源文件里特定的字符串替换掉了。

上面代码仅作思路参考，请根据自己的实际情况改写。

Answer 2

configs.js

module.exports = {
    // 单文件用
    baseURL: key + "/app/api/v2",
    // publicPath: "/", 
    // assetsSubDirectory: "./" 
    // 非单文件用
    // baseURL: "/app/api/v2", //配合proxy代理使用
};

elseFile.js

const configs = require('../configs.js');

console.log(configs,'configs')

Answer 3

运行不同的命令，会执行对应的env文件去编译。

.env.development     npm run dev
.env.production        npm run build:prod
.env.staging        npm run build:stage

.env.development文件

# just a flag
ENV = 'development'


# base api
VUE_APP_BASE_API = ''

.env.production文件

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/....'

.env.staging文件

NODE_ENV = production

# just a flag
ENV = 'staging'

# base api
VUE_APP_BASE_API = '...'