如果我将 vuejs 与 CDN 一起使用，如何使用环境变量？答案

【问题标题】：How can I use environment variables if I use vuejs with CDN?如果我将 vuejs 与 CDN 一起使用，如何使用环境变量？
【发布时间】：2020-10-29 17:10:55
【问题描述】：

我使用 Vuejs CDN 来开发我的应用程序。现在，我想将 dev 和 prod 分开，因为 API 端点是分开的。我不想公开我的开发 API 端点。如何用最简单的方法做到这一点？

我尝试使用dotenv。将 DEBUG 变量放入 .env 中。

var debug = process.env.DEBUG;
console.log(debug);

Vue.directive('focus', {
    inserted: function (el) {
        el.focus()
    }
})

var vm =  new Vue({...

我的 .env 文件

DEBUG=true

我可以读取调试变量。但是，由于我没有使用 npm 安装 Vue，因此它给出了“未定义 Vue”的错误。还是我必须用 npm 安装 Vue？

【问题讨论】：

请发布完整代码或在codeandbox中直播
好的，我现在更新了更多上下文
“我不想暴露我的开发 API 端点”——这到底是什么意思？如果您不希望开发网站的访问者能够看到 Vue 向哪个 URL 发出请求，那么根据定义，这是不可能的。浏览器必须发出请求，用户可以检查浏览器发出的任何和所有请求。
if (dev env) url = 'dev endpoint'; else // dev url = 'prod 端点';我正在考虑使用类似的东西来分离开发和产品。如果我在 js 中检查主机名，当有人查看源代码时，它将公开 api。我在以前的 django 应用程序中使用这种方式来分离 dev 和 prod。当有服务器端应用程序时，我可以用 django 打印 if

标签： vue.js npm dotenv

【解决方案1】：

如果您使用的是Vue CLI，则已经以.env files 的形式内置了这方面的设施。您将创建 .env.dev 和 .env.production 文件（可能还有一个用于本地开发的 .env.local），其中包含：

VUE_APP_ENDPOINT=https://...

在您的 Javascript 文件中，您可以通过以下方式访问：

const endpoint = process.env.VUE_APP_ENDPOINT;

然后为两个不同的环境创建不同的构建：

vue-cli-service build --mode dev  # or --mode production

变量将被烘焙到构建中，因此您的两个不同构建只包含它们各自的端点。

【讨论】：