我在Laravel应用程序中有一个Vue组件。我想直接在我的Vue组件中检索配置(或.env Laravel文件)中的URL,而不是硬编码它。在webpack laravel mix中,我可以像这样检索我的.env变量。第一个月但是当我想在我的app.js中这样做时,我在试图要求dotenv时有一个can't resolve fs。在Vue组件中使用这些数据的最佳方式是什么?
can't resolve fs
egdjgwm81#
要在Laravel的Vue组件文件中访问你的env变量,你需要在你的变量前面加上MIX_。
.env文件中
以您的案例为例,如果您打算在.env文件中使用 APP_URL 作为变量,而不是 APP_URL,则应使用 MIX_APP_URL,如下所示:
MIX_APP_URL=http://example.com
字符串
在Vue组件文件中
然后,您可以通过在脚本中使用 process.env 对象来访问该变量,如下所示:
process.env.MIX_APP_URL
型假设今天你设置了一个名为proxyUrl的属性,并将变量赋值为它的值,在.vue文件的脚本中,代码应该如下所示:
export default { data () { return { proxyUrl: process.env.MIX_APP_URL, }, } }
型之后,你应该能够像往常一样在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>
型这里是Laravel 8.x发布的官方文档,如果你想看看的话。
v2g6jxz62#
我也遇到了同样的问题,但是把变量放在blade中对我来说不是一个选择,而且这意味着在blade文件中声明一个变量,然后在JavaScript文件中使用,这看起来有点混乱。所以如果你处于同样的位置,那么我认为有一个更好的解决方案。如果你使用Vue,你很可能使用Laravel mix编译文件。如果是这种情况,您可以将环境变量注入到Mix中,您只需要添加前缀MIX_。因此,您可以向.env文件添加一个变量,如:
MIX_SENTRY_DSN_PUBLIC=http://example.com
字符串然后像这样在你的JavaScript文件中访问这个变量:
process.env.MIX_SENTRY_DSN_PUBLIC
型你可以在你的预编译文件中的任何地方访问它。你可以在laravel文档中找到这些信息。https://laravel.com/docs/5.6/mix#environment-variables
w1e3prcc3#
重要您必须重新加载包才能使更改生效。我的没有工作,直到我杀死了开发包,并重新运行npm run watch。
npm run watch
lc8prwob4#
您可以在Blade模板中执行此操作:
let window.something = {{ config('seme_config.something') }}
字符串然后在JS中使用变量:
window.something
型另外,你不应该直接使用env()助手。只从配置文件中提取数据。
env()
bsxbgnwa5#
你不能通过像Vue这样的JS框架中典型的config('file. option')方法来访问配置变量。但是你可以做的是从你的控制器传递它们作为 prop :
return Inertia::render('Ticket', ['ticket' => $ticket, 'statusOptions' => config('ticket.options')]);
字符串然后在你的视野中抓住它们:
const props = defineProps({ ticket: Object, statusOptions: Array });
型希望这对你有帮助!
5条答案
按热度按时间egdjgwm81#
要在Laravel的Vue组件文件中访问你的env变量,你需要在你的变量前面加上MIX_。
.env文件中
以您的案例为例,如果您打算在.env文件中使用 APP_URL 作为变量,而不是 APP_URL,则应使用 MIX_APP_URL,如下所示:
字符串
在Vue组件文件中
然后,您可以通过在脚本中使用 process.env 对象来访问该变量,如下所示:
型
假设今天你设置了一个名为proxyUrl的属性,并将变量赋值为它的值,在.vue文件的脚本中,代码应该如下所示:
型
之后,你应该能够像往常一样在vue模板中检索属性:
型
这里是Laravel 8.x发布的官方文档,如果你想看看的话。
v2g6jxz62#
我也遇到了同样的问题,但是把变量放在blade中对我来说不是一个选择,而且这意味着在blade文件中声明一个变量,然后在JavaScript文件中使用,这看起来有点混乱。所以如果你处于同样的位置,那么我认为有一个更好的解决方案。如果你使用Vue,你很可能使用Laravel mix编译文件。
如果是这种情况,您可以将环境变量注入到Mix中,您只需要添加前缀MIX_。因此,您可以向.env文件添加一个变量,如:
字符串
然后像这样在你的JavaScript文件中访问这个变量:
型
你可以在你的预编译文件中的任何地方访问它。你可以在laravel文档中找到这些信息。https://laravel.com/docs/5.6/mix#environment-variables
w1e3prcc3#
重要
您必须重新加载包才能使更改生效。
我的没有工作,直到我杀死了开发包,并重新运行
npm run watch
。lc8prwob4#
您可以在Blade模板中执行此操作:
字符串
然后在JS中使用变量:
型
另外,你不应该直接使用
env()
助手。只从配置文件中提取数据。bsxbgnwa5#
你不能通过像Vue这样的JS框架中典型的config('file. option')方法来访问配置变量。
但是你可以做的是从你的控制器传递它们作为 prop :
字符串
然后在你的视野中抓住它们:
型
希望这对你有帮助!