vue webpack环境变量的使用

vue webpack环境变量的使用

在package.json文件中定义脚本：

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:no-mock": "cross-env MOCK=none vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  }

其中的cross-env是因为在windows环境和其他环境不同无法直接使用环境变量，通过cnpm i cross-env --D安装依赖，之后在各个平台就可以使用了。

在vue.config.js通过process.env变量取得参数，如下所示：

bypass: function(req, res) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          } else if (process.env.MOCK !== "none") {
            // 如果请求的不是静态页面则走这里代理
            let name = req.path
              .split("/api/")[1]
              .split("/")
              .join("_");
            let path = `./mock/${name}`;
            let mock = require(path);
            let result = mock(req.method);
            delete require.cache[require.resolve(path)];
            return res.send(result);
          }
        }

注意在使用时通过命令行运行npm run serve:no-mock