开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

情况一：只需要webpack打包时获取环境信息，并加载不同的webpack.config.js配置

• package.json

  "scripts": {
    "dev": "set NODE_ENV=development && webpack-dev-server ",
    "build": "set NODE_ENV=production && webpack"
  },

• webpack.config.js

console.log(process.env.NODE_ENV)
module.exports = {
    // ...加载不同配置
}

注意：这种方式只在node环境也就是打包的时候有需求。

情况二：代码逻辑需要获取到不同环境配置不同请求头

在情况一的基础上

• webpack.config.js

const webpack = require("webpack");
module.exports = {
// ....
    plugins: [
        new webpack.DefinePlugin({
          "process.env": {
            WEB_NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          },
        }),
  ],
 // ....
}

• 入口文件main.js(业务代码)

    // 可以根据环境使用不同的url请求头
    console.log(process.env.WEB_NODE_ENV)

注意：这里打印的web环境

• npm run dev 运行后打印 development
• npm run build 打开index.html打印 production

这我使用webpack举例，如果是框架项目，操作方式不同，但原理类似。

情况三：打包成dist后，还需要动态修改配置文件

这里可能有小伙伴会打包在 public->static静态文件夹里

webpack可能用到copy-webpack-plugin这个插件，这里举个 vue-cli-service 的例子，在vue项目中只需要在根目录public文件夹里的创建配置文件，引入使用即可。

使用 vue-cli-service 打包dist中就会有一个static静态文件夹，但是我们去修改这个config配置是不能同步到项目的，我们可以搜索这个配置

可以看出config里的配置是被打包到app.xxx.map，它只是将public->static文件夹的配置复制打包到dist的static中了，这样你修改外层config.js 肯定是失效的。

正确操作

利用入口文件index.html引入配置文件，然后挂载在window上

• 配置文件

   var devUrl = "http:xxxx";
   var prdUrl = "http:xxxx"

这里准备了两个配置信息，并挂载在window。

• index.html引入

    <script src="./static/config.js"></script>

• 最后项目中直接使用

let config = window.devUrl
if (process.env.WEB_NODE_ENV === 'development') {    
    config = window.prdUrl 
}

通过这种方式打包后，你修改dist->static->config.js配置文件同样会同步到业务中。