laravel 在 vue 组件中检索配置和环境变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48785826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retrieve config and env variable in vue component
提问by Komarzer
I have a Vue component in my Laravel application.
我的 Laravel 应用程序中有一个 Vue 组件。
I want to retrieve a URL that is in a config (or the .env Laravel file) directly in my Vue component, instead of hardcoding it. In webpack laravel mix I can retrieve my .env variable like this.
我想直接在我的 Vue 组件中检索配置（或 .env Laravel 文件）中的 URL，而不是对其进行硬编码。在 webpack laravel mix 中，我可以像这样检索我的 .env 变量。
require('dotenv').config()
let proxyUrl = process.env.APP_URL
require('dotenv').config()
let proxyUrl = process.env.APP_URL
But when I want to do this in my app.js, I have a can't resolve fswhen trying to require dotenv.
但是当我想在我的 app.js 中执行此操作时，我can't resolve fs在尝试要求 dotenv 时遇到了问题。
What is the best way to have this data available in my Vue components ?
在我的 Vue 组件中使用这些数据的最佳方法是什么？
回答by UX Andre
To access your env variables in a Vue Component file in Laravel, you will need to prefix your variable with MIX_.
要在 Laravel 的 Vue 组件文件中访问 env 变量，您需要在变量前加上MIX_前缀。
In the .env file
在 .env 文件中
To take your case as an example, if you intend to use APP_URLas a variable in your .env file, instead of APP_URL, you should use MIX_APP_URLlike:
以您的情况为例，如果您打算在 .env 文件中使用APP_URL作为变量，而不是APP_URL，则应使用MIX_APP_URL ，例如：
MIX_APP_URL=http://example.com
In your Vue Component file
在你的 Vue 组件文件中
You then access the variable by using the process.envobject in your script like:
然后，您可以通过在脚本中使用process.env对象来访问该变量，例如：
process.env.MIX_APP_URL
Say today you set a property named proxyUrl and assign the variable as its value, in your script in the .vue file, the code should look like:
假设今天您设置了一个名为 proxyUrl 的属性并将该变量分配为其值，在您的脚本中的 .vue 文件中，代码应如下所示：
export default {
data () {
return {
proxyUrl: process.env.MIX_APP_URL,
},
}
}
After that you should be able to retrieve the property in your vue template as normal like:
之后，您应该能够像往常一样检索 vue 模板中的属性，例如：
<template>
<div>
//To print the value out
<p>{{proxyUrl}}</p>
// To access proxyUrl and bind it to an attribute
<div :url='proxyUrl'>Example as an attribute</div>
</div>
</template>
Here is the official doc released in Laravel 6.x, in case you want to have a look.
这是在 Laravel 6.x 中发布的官方文档，以防您想看一看。
回答by Eli
I had this same issue, but placing the variable in blade was not an options for me, also it meant having a variable declare in a blade file and then use in a javascript file which seems a bit unorganized. So if you are in this same position then I think there is a better solution. If you are using Vue you most likely are compiling your files using Laravel mix.
我有同样的问题，但将变量放在刀片中对我来说不是一个选项，这也意味着在刀片文件中声明一个变量，然后在似乎有点无组织的 javascript 文件中使用。因此，如果您处于相同的位置，那么我认为有更好的解决方案。如果您使用 Vue，您很可能正在使用 Laravel mix 编译您的文件。
If this is the case you can inject environment variables into Mix, you just need to add the prefix MIX_. So you can add to your .env file a variable like:
如果是这种情况，您可以将环境变量注入 Mix，只需添加前缀 MIX_。所以你可以在你的 .env 文件中添加一个变量，如：
MIX_SENTRY_DSN_PUBLIC=http://example.com
and then access this variable like this in your javascript file:
然后在你的 javascript 文件中像这样访问这个变量：
process.env.MIX_SENTRY_DSN_PUBLIC
you can access this anywhere in your pre compile file. You can find this information in the laravel documentation. https://laravel.com/docs/5.6/mix#environment-variables
您可以在预编译文件的任何位置访问它。您可以在 laravel 文档中找到此信息。https://laravel.com/docs/5.6/mix#environment-variables
回答by Alexey Mezenin
You can do this in Blade template:
您可以在 Blade 模板中执行此操作：
let window.something = {{ config('seme_config.something') }}
Then just use the variable in JS with:
然后只需在 JS 中使用变量：
window.something
Also, you shouldn't use env()helper directly. Extract data from config file only.
此外，您不应该env()直接使用helper。仅从配置文件中提取数据。
回答by agm1984
IMPORTANT
重要的
You have to reload the bundle for the changes to take effect.
您必须重新加载包才能使更改生效。
Mine didn't work until I killed the dev bundle and re-ran npm run watch.
我的没有工作，直到我杀死了开发包并重新运行npm run watch。
