代码之家 › 专栏 › 技术社区 › Sebastian

使用vue cli配置特定于环境的变量

vue-cli vue.js webpack

2

Sebastian · 技术社区 · 7 年前

我正试图找出如何将使用vue CLI3生成的vue应用程序部署到生产环境中。我计划将其作为静态文件托管(这不是服务器端代码)。我需要根据当前环境(dev vs production)在代码中设置某些变量。其中包括api url和身份验证信息(没有一个是机密的)。

做这个最好的方法是什么?

以下是vue cli 3的配置文档: https://cli.vuejs.org/config/

2 回复 | 直到 7 年前

1

6

Max Sinev 7 年前

您可以将变量添加到现有的 DefinePlugin 配置为 chainWebpack :

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
          args[0] = {
             ...args[0],
             "MY_API_URL": JSON.stringify(process.env.URL),
             // other stuff
          }
          return args
       })
  }
}

并在中配置环境变量 .env .

2

0

nilobarp 5 年前

使配置值成为 process.env 对麦克斯·辛涅夫的回答稍作更新

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin("define").tap(args => {
      let _base = args[0]["process.env"];
      args[0]["process.env"] = {
        ..._base,
        "API_URL": JSON.stringify(process.env.URL),
      };
      return args;
    });
  }
}

现在 API_URL 可以访问为 precess.env.API_URL

3

0

Sebastian 5 年前

必须用VUE_APP启动变量名( https://cli.vuejs.org/guide/mode-and-env.html )