process.env.MIX_ONBOARDING_URL variable is undefined

• Laravel Mix Version: 6.0.31 (npm list --depth=0)
• Node Version (node -v): 14.15.5
• NPM Version (npm -v): 6.14.11 -OS: Ubuntu

Description: I have a vue component that uses process.env.MIX_ONBOARDING_URL and locally it's working like a charm, but I started to migrate to serverless using Vapor and after deployment there is a "Ts.env.MIX_ONBOARDING_URL" instead of "http://example.com/" url.

I tried https://github.com/laravel-mix/laravel-mix/issues/2782 and other closed issues related with .env variables picking.

Anyone could help with that? Thank you for your time in advance.

Steps To Reproduce:

vapor.yml

build:
      - 'COMPOSER_MIRROR_PATH_REPOS=1 composer install'
      - 'php artisan event:cache'
      - 'npm ci && npm run production && rm -rf node_modules'
    deploy:
      - 'php artisan migrate --force'

webpack.mix.widget.js

const mix = require('laravel-mix');

mix.setPublicPath('public')
  .js('resources/js/widget/src/main.js', 'widget/widget.js').vue({
    version: 2,
    options: {
      shadowMode: true
    }
  });

main.js

import Vue from "vue";
import wrap from "@vue/web-component-wrapper";
import Widget from "./Widget.vue";

const wrappedElement = wrap(Vue, Widget);

window.customElements.define("widget", wrappedElement);

widget.js

<template>
    <iframe
        width="100%"
        height="100%"
        frameborder="0"
        :src="iframe.src"
        @load="load"
        v-show="iframe.loaded"
    >
    </iframe>
</template>

<script>
export default {
    data: function() {
        return {
            iframe: {
                src: process.env.MIX_ONBOARDING_URL + this.token,
                loaded: false
            },
            message: ''
        }
    },
    props: {
        token: {
            type: String,
            default: ''
        }
    },
    methods: {
        load: function() {
            this.iframe.loaded = true;
        }
    }
};
</script>