如何在 Vue Js 组件中获取环境变量

Question

需要任何人的帮助。

如何获取 Laravel 项目中 .env 文件下定义的环境变量，我想在 vuejs 组件中访问此环境。

.env file

SECREAT_KEY=<My secreat key here>

我想访问登录组件下的相同变量

export default {
       name: 'login',
        data () {
            return {
                login: {
                    username: '',
                    password: '',
                    grant_type: 'password',
                    client_id: <client id>,
                    client_secret: <SECREAT_KEY I want access here>
                },
                submitted: false
            }
        }
}

Answer 1

在您的布局文件（主要是：app.blade.php）中，在关闭 head 标签之前添加：

<script>
var APP_NAME = <?php echo json_encode([
  "secret_key" => config('services.secret_key')
]); ?>
</script>

在您的 config/services.php 中： 添加您的密钥

[
  'secret_key' => env('SECRET_KEY'),
]

现在，在您的 vue 文件或任何 js 文件中，您可以像访问它一样访问它

APP_NAME.secret_key

Answer 2

通过使用 MIX_ 创建单独的环境变量前缀

输入 .env 文件

MIX_SECREAT_KEY = 123456789

在 .env 文件中添加环境变量后，现在您可以通过 process.env 对象访问 vue..

  process.env.MIX_SECREAT_KEY

在你访问环境变量之前你需要重启watch任务