vue业务逻辑中关键参数基于不同环境的动态配置

Question

最近开发一个移动端项目，接口是调用的客户主程上的接口，项目部署到客户服务器，由于公司没有客户公众号测试环境，造成测试环境和生产环境的代码修改配置处过多。有没有可能通过配置webpack动态生成基于不同环境的代码包？想问一下有没有相关资料案例，或者说明文档。谢谢大家

Answer 1

你可以通过--env选项来配置“环境变量”，例如：npx webpack --env.MYENV=dev

module.exports = env = {
    const { MYENV } = env
    if(MYENV === 'dev') {
        // MYENV === 'dev'的配置
    }else {
        // MYENV !== 'dev'的配置
    }
    // ...
}

这个配置的MYENV只能在配置文件中使用，如果你想要在全局JavaScript中使用，
你还需要配置webpack.DefinePlugin插件。

module.exports = env = {
    const { MYENV } = env
    if(MYENV === 'dev') {
        // MYENV === 'dev'的配置
    }else {
        // MYENV !== 'dev'的配置
    }
    
    return {
        // ...
        plugins: [
            new webpack.DefinePlugin({
                MYENV: JSON.stringify(env.MYENV)
            })
        ]
    }
}

这样你就可以直接在业务中直接使用MYENV全局变量了。
对于process.env.NODE_ENV环境变量，webpack会根据构建模式自动配置，不需要你手动配置。你可以使用：

假设使用--mode=development构建

console.log(process.env.NODE_ENV)            // 'development'

具体看官方文档。

• 你还可以通过cross-env模块不依赖webpack来注入全局变量。
• Vue-cli也提供了环境变量和模式配置，看官方文档