После билда не работает вью, в чем проблема?

Question

[Никита Зеликов]

Добрый день, собрал проект для деплоя на вдс, через npm run build и он не работает, выдаёт ошибки:

npm run dev работает и все отлично связывается.
Мой vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
});

Мой app.js

import './bootstrap';
import '../css/style.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

Подключена inertia js для ларавел
Убирал this и писал без него, не помогает. Проблема в this. в темплейтах если убрать, то работает компонент (частично). Предполагаю что возможно настройки не правильные в конфигах или по какой причине он не работает...

update...

<div class="cost--form-pos">
                        <div v-if="this.email === ''">
                            <svg viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" class="cost--mail-img">
                                <path id="cost-mail-icon"
                                      d="M16.4167 3.8145V10.2603C16.4167 10.9174 16.1653 11.5497 15.714 12.0274C15.2626 12.5051 14.6456 12.792 13.9895 12.8292L13.8438 12.8332H3.15629C2.4991 12.8332 1.8668 12.5818 1.38911 12.1304C0.911414 11.6791 0.62454 11.0621 0.587332 10.4059L0.583374 10.2603V3.8145L8.22454 7.81717C8.30955 7.8617 8.40408 7.88496 8.50004 7.88496C8.596 7.88496 8.69053 7.8617 8.77554 7.81717L16.4167 3.8145ZM3.15629 0.166504H13.8438C14.4815 0.166427 15.0966 0.403209 15.5697 0.830924C16.0427 1.25864 16.3401 1.8468 16.404 2.48134L8.50004 6.62175L0.596041 2.48134C0.657413 1.872 0.934122 1.30454 1.37643 0.880954C1.81873 0.457369 2.39762 0.205444 3.00904 0.170462L3.15629 0.166504H13.8438H3.15629Z"
                                      fill="white"/>
                            </svg>
                        </div>
                        <div v-else-if="this.emailError === true">
                            <svg viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" class="cost--mail-img">
                                <path id="cost-mail-icon"
                                      d="M16.4167 3.8145V10.2603C16.4167 10.9174 16.1653 11.5497 15.714 12.0274C15.2626 12.5051 14.6456 12.792 13.9895 12.8292L13.8438 12.8332H3.15629C2.4991 12.8332 1.8668 12.5818 1.38911 12.1304C0.911414 11.6791 0.62454 11.0621 0.587332 10.4059L0.583374 10.2603V3.8145L8.22454 7.81717C8.30955 7.8617 8.40408 7.88496 8.50004 7.88496C8.596 7.88496 8.69053 7.8617 8.77554 7.81717L16.4167 3.8145ZM3.15629 0.166504H13.8438C14.4815 0.166427 15.0966 0.403209 15.5697 0.830924C16.0427 1.25864 16.3401 1.8468 16.404 2.48134L8.50004 6.62175L0.596041 2.48134C0.657413 1.872 0.934122 1.30454 1.37643 0.880954C1.81873 0.457369 2.39762 0.205444 3.00904 0.170462L3.15629 0.166504H13.8438H3.15629Z"
                                      fill="#EE4545"/>
                            </svg>
                        </div>
                        <div v-else>
                            <svg viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" class="cost--mail-img">
                                <path id="cost-mail-icon"
                                      d="M16.4167 3.8145V10.2603C16.4167 10.9174 16.1653 11.5497 15.714 12.0274C15.2626 12.5051 14.6456 12.792 13.9895 12.8292L13.8438 12.8332H3.15629C2.4991 12.8332 1.8668 12.5818 1.38911 12.1304C0.911414 11.6791 0.62454 11.0621 0.587332 10.4059L0.583374 10.2603V3.8145L8.22454 7.81717C8.30955 7.8617 8.40408 7.88496 8.50004 7.88496C8.596 7.88496 8.69053 7.8617 8.77554 7.81717L16.4167 3.8145ZM3.15629 0.166504H13.8438C14.4815 0.166427 15.0966 0.403209 15.5697 0.830924C16.0427 1.25864 16.3401 1.8468 16.404 2.48134L8.50004 6.62175L0.596041 2.48134C0.657413 1.872 0.934122 1.30454 1.37643 0.880954C1.81873 0.457369 2.39762 0.205444 3.00904 0.170462L3.15629 0.166504H13.8438H3.15629Z"
                                      fill="#5A9E4E"/>
                            </svg>
                        </div>

                        <div v-if="this.emailError === true">
                            <input id="email" type="email" class="cost--form-input cost--form-input-incorect-ph"
                                   style="border: 1px solid red" placeholder="Введите вашу почту" v-model="this.email" required
                                   autocomplete="username"/>
                        </div>
                        <div v-else>
                            <input id="email" type="email" class="cost--form-input cost--form-input-incorect-ph"
                                   placeholder="Введите вашу почту" v-model="this.email" required
                                   autocomplete="username"/>
                        </div>
                    </div> 

<script>
    import {useForm} from "@inertiajs/inertia-vue3";

    export default {
        name: "Register",

        data() {
            return {
                checked: false,
                email: '',
                emailError: false,
            }
        },
        methods: {

            checkEmail:  function () {
                axios.post('/api/checkEmail', {
                    email: this.email
                }).then(res => {
                    if(res.data === false){
                        this.requestForm();
                    } else {
                        this.emailError = true;
                    }
                }).catch(err => {
                    console.log(err);
                })

            },
        }
    }

</script>

Comments

[Степан Крапивин]

в ошибке пишется про поле email. Где код, использующий email?

[Никита Зеликов]

Степан Крапивин, Добавил код ниже

Answer 1

[mikhailivanko]

Попробуй так

checkEmail:  function () {
                const _this = this
                axios.post('/api/checkEmail', {
                    email: _this.email
                }).then(res => {
                    if(res.data === false){
                        _this.requestForm();
                    } else {
                        _this.emailError = true;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

Comments

[Никита Зеликов]

Уже разобрался с проблемой, оказывается при билде в темплейте this. не работает и нужно выводить переменные без this.

[mikhailivanko]

Да, на темплейт даже не посмотрел )

[Никита Зеликов]

mikhailivanko, Хотя почему при run dev работает, а при билде нет, не совсем ясно)