如何通过前端按钮实现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
相关产品推荐
相关产品推荐

