Vue.js 没有 vue-cli 的环境变量

Question

不使用 vue-cli 为 Vue.js 应用程序加载环境变量的最佳方法是什么？在 vue-cli 方式中，您只需更新 .env 文件，这些变量应该在 Vue.js 应用程序中可用，如下所示：https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode

我正在使用 Symfony Webpack Encore 并且没有安装 vue-cli，如何将我的环境变量传递到整个 Vue 应用程序？

Answer 1

目前这看起来是一个不错的加载配置的方法：https://github.com/symfony/webpack-encore/issues/567

首先安装 dotenv 包，然后在我的 webpack.config.js:

上使用它

const dotenv = require('dotenv');

.configureDefinePlugin(options => {
    const dotenvOptions = {};
    const envConfigPath = `.env.${process.env.NODE_ENV}`;

    if (fs.existsSync(envConfigPath)) dotenvOptions.path = envConfigPath;

    const env = dotenv.config(dotenvOptions);

    if (env.error) {
        throw env.error;
    }

    options['process.env'].PMP_API_BASE_URI = JSON.stringify(env.parsed.PMP_API_BASE_URI);
})

如果需要 .env.dev.local 然后提供 NODE_ENV=dev.local 而运行ning npm 运行构建命令。

Answer 2

只需创建一个 .env 文件并像这样创建变量 VUE_APP_XXXXX

你注意到 VUE_APP 确保所有变量都有 VUE_APP 前缀。

VUE_APP_API_URL

用于开发 .env.development。

用于生产 .env.production

Vue.js 没有 vue-cli 的环境变量

Vue.js environment variables without vue-cli

javascript

webpack

vue.js

vuejs2