时间戳

首页 > 解决方案 > 使用 vue-cli 配置环境特定变量

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

问题描述

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

这样做的最佳方法是什么？

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

标签： webpackvue.jsvue-cli

解决方案

您可以使用以下命令将变量添加到现有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.

推荐阅读