Question

我试图弄清楚如何将用vue-cli 3生成的vue应用程序部署到生产环境中。我计划将其托管为静态文件（这不是服务器端代码）。我需要根据当前环境（开发与生产）在代码中设置某些变量。其中包括api-url和身份验证信息（都不是机密信息）。

做到这一点的最佳方法是什么？

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

Answer 1

您可以使用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中配置环境变量。

Answer 2

您可以将任意Webpack配置应用于vue-cli（see docs here）内部使用的配置。

您有一些选择，但是通常的方法是使用DefinePlugin从环境中获取常量值，该值是在调用构建脚本之前设置的。

因此，首先创建以下内容或将以下内容添加到您的vue.config.js文件中：

var webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
       'process.env.API_URL': JSON.stringify(process.env.API_URL)
      })
    ]
  }
}

然后在使用vue-cli运行构建之前，设置所需的环境变量。使用npm脚本和cross-env在package.json文件中最容易做到这一点。例如：

{
  "script": {
    "build": "cross-env API_URL=http://website.com/api/v1 vue-cli-service build"
  }
}

最后，在应用程序中使用常量。例如：

// api.js
export function get (pathname) {
  return fetch(process.env.API_URL + '/' + pathname)
  // after compile becomes:
  // return fetch('http://website.com/api/v1' + '/' + pathname)
}

或者，您可以使用.env支持的vue-cli文件（docs）设置环境变量（变量名称必须以VUE_APP（https://github.com/vuejs/vue-cli/issues/787开头）。

（很抱歉，如果某些Vue东西不正确，我将从Webpack的角度来探讨这个问题。）

Answer 3

要使配置值成为process.env的一部分，对Max Sinev的答案稍作更新即可

// 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的身份访问

Answer 4

您必须以VUE_APP（https://cli.vuejs.org/guide/mode-and-env.html）开头变量名

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

4 个答案: