.env 变量在 Laravel 项目中的 Vue 组件中返回 undefined答案

【问题标题】：.env variables return undefined in Vue components inside a Laravel project.env 变量在 Laravel 项目中的 Vue 组件中返回 undefined
【发布时间】：2021-08-15 20:49:32
【问题描述】：

试图让 .env 变量在 Laravel 项目的 Vue 组件中工作，但只是返回未定义。我试过npm run watch、npm run dev、artisan serve，但没有结果。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@intlify/eslint-plugin-vue-i18n": "^0.11.1",
        "@vue/compiler-sfc": "^3.0.11",
        "autoprefixer": "^10.2.5",
        "axios": "^0.19.2",
        "bootstrap": "^4.6.0",
        "eslint": "^7.27.0",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.19",
        "node-sass": "^6.0.0",
        "popper.js": "^1.16.1",
        "postcss": "^8.2.15",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^10.0.0",
        "tailwindcss": "^2.1.2",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2",
        "vue-template-compiler": "^2.6.12",
        "webpack-cli": "^4.7.0"
    },
    "dependencies": {
        "@vue/cli": "^4.5.13",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.3.0",
        "npm-watch": "^0.9.0",
        "postcss-import": "^14.0.2",
        "vue-i18n": "^9.1.6",
        "vue-router": "^4.0.8",
        "vue3-click-away": "^1.2.1",
        "vuex": "^4.0.0"
    }
}

.env

VUE_APP_I18N_SUPPORTED_LOCALE=en,de,nl

Component.vue

console.log(process.env.VUE_APP_I18N_SUPPORTED_LOCALE)

【问题讨论】：

如果对您有用，请选择我的答案作为正确答案

标签： laravel vue.js environment-variables

【解决方案1】：

您必须在 .env 中为变量添加前缀“MIX”，如下所示：MIX_VUE_APP_I18N_SUPPORTED_LOCALE=en,de,nl，然后您可以通过 console.log(process.env.MIX_VUE_APP_I18N_SUPPORTED_LOCALE) 调用它。阅读更多the Laravel doc

另外，记得重启你的服务器，重新编译 vue 应用，然后你就可以开始了。

【讨论】：

【解决方案2】：

process.env 保存 node.js 进程启动时可用的实际environment variables。

如果您想从 .env 加载值并让您的节点进程将它们视为常规环境变量，您可以使用现有的 npm 包之一，例如。 dotenv.

但要小心：

这些值仅在构建时可用（并且“冻结”）
如果您不小心，您可能会将机密数据（如 api 密钥或其他机密）暴露给客户端

【讨论】：

【解决方案3】：

您可以将环境变量注入到您的 webpack.mix.js 脚本中，方法是在 .env 文件中的环境变量之一前加上 MIX_：

MIX_SENTRY_DSN_PUBLIC=http://example.com

在您的 .env 文件中定义变量后，您可以通过 process.env 对象访问它。但是，如果在任务运行时环境变量的值发生变化，您将需要重新启动任务：

process.env.MIX_SENTRY_DSN_PUBLIC

我已经对其进行了测试，它适用于 Laravel 5.7 和 Vue 2.6。

参考： https://laravel.com/docs/8.x/mix#environment-variables

【讨论】：