Vue.js环境变量使用：纯Vue+Laravel（无Webpack）多环境配置

当然可以在Vue.js中使用环境变量！不管是带构建工具的项目还是纯CDN引入的Vue场景，都有对应的解决方案。针对你提到的纯Vue环境（不依赖Webpack等构建工具）结合Laravel的场景，我来一步步给你讲清楚怎么实现多环境变量的区分和使用：

一、Vue.js中使用环境变量的基础逻辑 #

Vue本身（无构建工具时）无法直接读取后端的.env文件，但我们可以借助Laravel的后端能力，把环境变量注入到前端全局作用域中，让Vue实例能够访问到这些变量。

二、具体实现步骤 #

1. 在Laravel中定义环境变量 #

首先在Laravel项目根目录的.env文件中添加你需要的前端配置变量，建议统一前缀（比如VUE_APP_）方便区分：

# .env 文件
APP_ENV=production
VUE_APP_API_URL=https://prod-api.example.com
VUE_APP_DEBUG=false

如果需要区分多环境，Laravel支持创建对应环境的.env文件，比如：

• 本地开发：.env.local
• 预发布环境：.env.staging

只需在对应环境的文件中覆盖变量即可，比如.env.local中：

APP_ENV=local
VUE_APP_API_URL=http://localhost:8000/api
VUE_APP_DEBUG=true

2. 配置Laravel的config文件（可选但推荐） #

Laravel默认只会暴露以APP_开头的变量，为了更规范地管理前端配置，我们可以在config/app.php中添加一个专门的配置项：

// config/app.php
return [
    // ...其他原有配置
    'vue_env' => [
        'api_url' => env('VUE_APP_API_URL', 'http://default-api.example.com'),
        'debug' => env('VUE_APP_DEBUG', false),
    ],
];

这样做的好处是可以给变量设置默认值，同时统一管理所有前端需要的配置。

3. 在Blade模板中注入全局变量 #

在你的主Blade模板（比如resources/views/app.blade.php）的<head>标签中，添加一段脚本，把Laravel的配置注入到window对象中：

<!-- resources/views/app.blade.php -->
<head>
    <!-- ...其他资源引入 -->
    <script>
        // 将Laravel配置注入到全局window对象
        window.VUE_ENV = {
            apiUrl: '{{ config('app.vue_env.api_url') }}',
            debug: {{ config('app.vue_env.debug') ? 'true' : 'false' }},
        };
    </script>
</head>

注意：布尔值不能直接用{{ }}输出（会变成1或0），所以要通过三元运算符转成true/false的字符串。

4. 在纯Vue实例中使用环境变量 #

现在你可以在CDN引入的Vue实例中直接访问这些全局变量了：

// 纯Vue实例（CDN引入场景）
const app = new Vue({
    el: '#app',
    data() {
        return {
            apiBaseUrl: window.VUE_ENV.apiUrl,
            isDebug: window.VUE_ENV.debug
        };
    },
    created() {
        console.log('当前环境API地址:', this.apiBaseUrl);
        if (this.isDebug) {
            console.log('调试模式已开启，将输出更多日志');
        }
    },
    methods: {
        fetchData() {
            // 使用环境变量中的API地址发起请求
            fetch(`${this.apiBaseUrl}/posts`)
                .then(res => res.json())
                .then(data => console.log(data));
        }
    }
});

三、注意事项 #

• 敏感信息不要暴露：前端代码是公开可查的，所以绝对不要把API密钥、数据库密码等敏感信息注入到前端环境变量中，只放非敏感的配置（比如API地址、调试模式）。
• 环境切换逻辑：Laravel会根据APP_ENV的值自动加载对应环境的.env文件，比如当APP_ENV=local时，会优先加载.env.local中的变量，覆盖.env的默认值。
• 无Webpack的限制：纯Vue（CDN引入）没有构建过程，所以无法像Vue CLI那样使用process.env，必须通过后端注入全局变量的方式实现。

内容的提问来源于stack exchange，提问作者Ivan Rusli Mcdohl