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

Posted 2023-02-24

【中文标题】.env 变量在 Laravel 项目中的 Vue 组件中返回 undefined

【英文标题】：.env variables return undefined in Vue components inside a Laravel project

【发布时间】：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)

【问题讨论】：

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

【参考方案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