You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何通过前端按钮实现Laravel+Vue+Inertia项目自动构建?

自定义CMS自动重建问题(Laravel+Vue+Inertia栈)

我正在为客户开发一款自定义CMS,需求是允许修改应用内所有文本内容,修改完成后项目需要自动重建。当前采用Laravel、Vue和Inertia技术栈,尝试使用child_process及node-cmd包实现前端按钮触发npm run build,但均未成功,相关代码如下:

<template>
    <form :action="route('cms.store')" method="post">
        <input type="hidden" :value="lang" name="lang">
        <input type="hidden" name="_token" :value="csrf">

        <div class="flex flex-row items-center gap-2">
            <button type="submit" class=" bg-bgDark px-5 py-2.5">Sla op</button>
            <button @click="sync()" class="bg-bgDark px-5 py-2.5">Synchroniseer</button>
        </div>

        <TabWrapper>
            <TabItem
                v-for="(value, key) in json"
                :id="key"
                :label="key"
            >
                <div v-for="(value2, key2) in value" :key="key2" class="flex flex-col min-w-max">
                    <label :for="value2"> {{ camelCase(key2) }}</label>
                    <input class="bg-bgLight border-bgDark p-4 mb-5" type="text" :name="key + '--' + key2" :value="value2">
                </div>
            </TabItem>
        </TabWrapper>
    </form>
</template>

<script>
import TabItem from '../Tabs/TabItem.vue';
import TabWrapper from '../Tabs/TabWrapper.vue';
import { exec } from 'child_process';

export default {
    props: {
        json: Object,
        languages: Object,
        lang: String,
    },
    methods: {
        camelCase(value) {
            value = value.replace(/([A-Z])/g, " $1");
            value = value.replace(/^ /, "");
            value = value.charAt(0).toUpperCase() + value.slice(1);
            return value;
        },
        sync() {
            exec('npm run build', function (err) {
                if (err) {
                    console.log(err);
                }
            });
            console.log('build has started')
        }
    },
    data() {
        return {
            csrf: document.querySelector("meta[name=\"csrf-token\"]").getAttribute("content"),
        };
    },
    components: { TabWrapper, TabItem }
}
</script>

内容的提问来源于stack exchange,提问作者Andries De Baere

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 18:35:08