请教 Laravel 中,使用 vue 时,如何在 vue 中使用.env 中配置的环境变量

webpack.mix.js中可以使用require('dotenv').config();

就可以在webpack.mix.js使用环境变量的内容了。

而在vue的app.js中,使用这个require('dotenv').config();就会报以下错误:

This dependency was not found:

* fs in ./node_modules/_dotenv@2.0.0@dotenv/lib/main.js

To install it, you can run: npm install --save fs

而用npm使用的默认编译配置。安装时并没有该fs引用。

"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

请教有什么办法可以把.env的配置加载到vue的js当中去?谢谢

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 8

@leo 感谢回复。

在环境变量中添加MIX前缀是能够取到。

有没有不加前缀,就能取得变量的方法?

比如我已经有一个APP_URL了,不想重复定义一个MIX_APP_URL的这种方式。

4年前 评论

可以使用 vue 的 mixin

<script>
    var js_data = @json($js_data);
    var mixin = {
        data: {
        },
        methods: {
        }
    }
</script>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
const app = new Vue({
    el: '#app',
    mixins: [mixin],
});

可以参考
https://github.com/ElapseAnnals/LaravelPlu...

4年前 评论
leo

@ziki 即使能够实现,这也是不推荐的做法,别忘了你的数据库账户密码可也都是写在 .env 文件里的,如果前端代码能够读取到 .env 文件中的所有变量,那等同于直接把这些信息泄露给黑客。

4年前 评论
APP_URL=some
MIX_APP_URL="${APP_URL}"
4年前 评论
Shuyi 4年前

定义非 MIX 开头的变量,是没办法的喔,这是 Laravel-Mix 构建工具定义的规范,只是为了构建使用,并非用在前端代码中,有配置需求,应考虑使用 JS 配置文件

4年前 评论

可以改用 vue cli 3 ,,,

4年前 评论

感谢各位回复。只能选一个答案啊。。。说的都有道理

@leo 说的对,安全考虑,不能全部在JS中能够使用。

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!