我的Laravel应用程序中有一个Vue组件.

我想直接在Vue组件中检索配置(或.env Laravel文件)中的URL,而不是对其进行硬编码.

require('dotenv').config() let proxyUrl = process.env.APP_URL

但当我想在我的应用程序中这样做时.js,当我试图要求dotenv时,我得到了can't resolve fs分.

让这些数据在我的Vue组件中可用的最佳方式是什么?

推荐答案

我也有同样的问题,但在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

Vue.js相关问答推荐

Vue3外部数组的响应性

是否可以使用 Vuetify/VueJS 为轮播设置默认图像而不是第一个图像?

是否可以将 nuxt3 与类星体框架一起使用

在计算(computed)属性上调用数组方法

两个div元素之间的vue2过渡

拖入 vue2-google-map 后如何获取标记位置?

使用 Nuxt 动态获取文件夹中的图像路径

使用带有 v-date-picker 的 new Date() 不起作用

如何将 axios/axios 拦截器全局附加到 Nuxt?

是否可以在 vue-devtools 中命名 Vue 实例?

Vue Prop 没有初始化器,也没有在构造函数中明确赋值

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

如何将项目推送到 Vuejs 中数据对象的数组中? Vue 似乎没有关注 .push() 方法

如何将事件绑定到 Vuetify 中的树视图 node ?

样式化 Vue 插槽

在路由更改之前显示确认对话框

Laravel 和 Vue - handler.call 不是函数

克隆元素并附加到 DOM 的正确方法

使用 Vue.js 获取所有选中复选框的列表

Vue-i18n - 无法读取未定义的属性配置