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

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，那么在运行npm命令时提供NODE_ENV=dev.local。

Answer 2

只需创建一个.env文件并创建像以下VUE_APP_XXXXX那样的变量

注意到VUE_APP，确保所有变量都有类似的VUE_APP前缀。

VUE_APP_API_URL

用于开发.env.development。

用于生产.env.production