我使用的是技术堆栈Laravel、Vue和惯性.现在我想把所有的东西都转换成Typescript ，但我遇到了一个我无法修复的问题.我拍了这段视频来帮助我:https://www.youtube.com/watch?v=xDcsrGGvCHI
我实现了视频中的所有内容.但现在，当我启动NPM运行dev时，我在Chrome的dev工具中收到以下消息:加载资源:服务器响应状态为500() 我已经试着自己解决这个问题了，但我不能再进一步了.消息说服务器有问题，所以一定有一些设置不合适.有人能帮帮我吗？这是我的配置
资源/js/app.ts
import "../css/app.css";
import { createApp, h, type DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
createInertiaApp({
resolve: async (name: string) => {
let page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue'))
return page
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
Tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"jsx": "preserve",
"module": "commonjs",
"paths": {
"@/*": ["./resources/js/*"]
},
"resolveJsonModule": true,
"allowJs": true,
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
资源/视图/app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('资源/js/app.ts')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
Vive.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/css/app.css', '资源/js/app.ts'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
我的父组件示例:
<script setup lang="ts">
import { defineProps, reactive, ref, onMounted } from 'vue';
import WeatherDisplay from './WeatherDisplay';
import { Refs, WeatherData } from '../interfaces/interfaces'
import { useDark, useToggle } from '@vueuse/core';
import { router } from '@inertiajs/vue3';
const isDark = useDark();
const toggleDark = useToggle(isDark);
// Define the props for the component
const props = defineProps<{
data: Object,
}>();
// This object contains all required refs
const allRefs = ref<Refs>({
searchWeather: '',
errorMessage: null,
});
// Creates a reactive array that is updated with weatherData
const weatherData = reactive<WeatherData[]>([]);
// Function to load data from local storage
function loadDataFromLocalStorage(): WeatherData[] {
const data = localStorage.getItem('weatherData');
return data ? JSON.parse(data) : [];
}
// Function to set data to local storage
function setDataToLocalStorage(data: WeatherData[]) {
weatherData.push(props.data);
localStorage.setItem('weatherData', JSON.stringify(data));
}
// Delete weather data from array and local storage
function deleteWeatherData(index: number) {
weatherData.splice(index, 1);
localStorage.setItem('weatherData', JSON.stringify(weatherData));
}
// Load the data from local storage on mounted
onMounted(() => {
const savedData = loadDataFromLocalStorage();
if (savedData.length > 0) {
weatherData.splice(0, weatherData.length, ...savedData);
}
if (props.data && !props.data.error) {
setDataToLocalStorage(weatherData);
} else if (props.data && props.data.error) {
allRefs.value.errorMessage = props.data.error.message;
console.log(allRefs.value.errorMessage);
}
});
// Define a method to send the GET request to the backend
async function submit() {
try {
await router.get('/weather', { searchWeather: allRefs.value.searchWeather });
} catch (error) {
console.log(error);
}
}
</script>
<template>
<main :class="{ 'dark-mode': isDark }">
<div class="flex flex-col items-center justify-center h-96">
<div
class="mb-4 text-center text-4xl font-bold dark:text-[#7371FF]"
>
SecureClouds
</div>
<div class="flex flex-row justify-end mb-4">
<div class="mr-4 flex items-center">
<span class="text-xl dark:text-[#7371FF]">
{{ isDark ? 'Dark' : 'Light' }} Mode
</span>
</div>
<div>
<button
@click="toggleDark()"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded dark:bg-[#22F1BF] dark:text-black"
>
Switch
</button>
</div>
</div>
<div class="block w-2/3 rounded-lg">
<div class="flex justify-center">
<div class="w-2/3 p-4">
<div
v-if="allRefs.errorMessage"
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
role="alert"
>
<strong class="font-bold">{{
allRefs.errorMessage
}}</strong>
</div>
<form @submit.prevent="submit" class="w-full">
<div
class="relative mb-4 flex w-full flex-wrap items-stretch"
>
<input
type="search"
class="relative bg-[#F9F3EE] m-0 -mr-px block flex-auto border border-neutral-300 rounded-lg shadow dark:bg-transparent bg-clip-padding px-6 py-4 text-lg font-normal text-neutral-700 outline-none transition duration-300 ease-in-out focus:border-primary-600 focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-[#22F1BF] dark:text-[#22F1BF] dark:placeholder:text-[#22F1BF]"
placeholder="Suchen..."
name="searchWeather"
aria-label="Search"
aria-describedby="button-addon3"
v-model="allRefs.searchWeather"
/>
<button
type="submit"
class="bg-[#F9F3EE] hover:bg-slate-200 text-gray-800 font-semibold py-2 px-6 border border-neutral-300 rounded-lg shadow ml-4 dark:bg-[#22F1BF] dark:border-[#22F1BF] dark:text-black"
>
Suchen
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<WeatherDisplay
v-for="(data, index) in weatherData"
:key="index"
:data="data"
@delete="deleteWeatherData(index)"
>
</WeatherDisplay>
</div>
</main>
</template>
<style>
main {
background-color: #b2c8df;
overflow-y: scroll;
height: 100vh;
}
.dark-mode {
background: #0d1117;
}
</style>