Laravel+Inertia+Vue3计算属性在Dev与Build模式下表现差异问询
Laravel 10 + Inertia + Vue3 + Vite开发中dev与build模式代码表现不一致问题
在使用Laravel 10.x、Inertia、Vue JS 3及Vite开发时,发现代码在npm run dev和npm run build模式下表现不一致:
相关组件代码(Tracker.vue)
<script setup> import { Head, router, usePage } from '@inertiajs/vue3' import { ref, reactive, computed } from 'vue' //*** 更多导入 ***/ const page = usePage(); const user = computed(() => page.props.auth.user); [...] function anyFunction() { // this.user.interval在npm run dev模式下可用,但npm run build模式下不可用 console.log(this.user.interval) // npm run dev可用,build不可用 console.log(user.value.interval) // dev和build模式下均可用 return true } // 其余代码...无关部分 </script>
关键差异:
this.user.interval:仅在npm run dev模式下能正常输出,npm run build模式下无法访问user.value.interval:在两种模式下均能正常工作
Vite配置文件(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', refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], build: { minify: true //调试build时可改为false } });
Package.json配置
{ "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@inertiajs/vue3": "^1.0.0", "@popperjs/core": "^2.11.8", "@tailwindcss/forms": "^0.5.3", "@vitejs/plugin-vue": "^4.0.0", "autoprefixer": "^10.4.12", "axios": "^1.1.2", "bootstrap": "^5.2.3", "bootstrap-icons": "^1.10.5", "laravel-vite-plugin": "^0.8.0", "postcss": "^8.4.18", "sass": "^1.56.1", "tailwindcss": "^3.2.1", "vite": "^4.0.0", "vue": "^3.2.41" }, "dependencies": { "@inertiajs/vue3": "^1.0.11", "@vitejs/plugin-vue": "^4.3.4", "vue3-colorpicker": "^2.2.2" } }
请问这是预期行为还是遇到了bug?如需更多信息请告知,感谢您的帮助!
内容的提问来源于stack exchange,提问作者Christian
相关产品推荐
相关产品推荐

