我正在嘗試使用以下堆疊設定一個新的 Laravel 8 專案，Laravel 8 Inertia.js Vue.js 3 Typescript（和 TailwindCSS，但尚未設定）。
出于某種原因，我在 app.ts 檔案中傳遞給 setup 函式的“App”變數出現了一個奇怪的錯誤，它被 VSCode 突出顯示，當我懸停它時，它說
Property 'App' does not exist on type '{ el: Element; app: InertiaApp; props: InertiaAppProps; plugin: Plugin_2; }'.ts(2339)
和往常一樣，這一定是愚蠢的事情，但我無法弄清楚它是什么。
我正在關注本教程https://laravel-news.com/typescript-laravel和 Inertia.js 檔案https://inertiajs.com/client-side-setup
我感謝任何幫助，謝謝。
------------------------------ 資源/js/app.ts
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
------------------------------ 索引.vue
<template>
<div>Isaac</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
}
})
</script>
------------------------------ tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2020",
"moduleResolution": "node",
"baseUrl": "./",
"strict": true, // Enable strict type-checking options
"skipLibCheck": true, // Skip type checking of declaration files
"noImplicitAny": false // Bypass raising errors on `any` type
},
"include": ["resources/js/**/*"] // Frontend paths pattern
}
------------------------------ webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.ts', 'public/js').vue({version: 3})
.postCss('resources/css/app.css', 'public/css', [
//
]);
------------------------------ package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.2.20",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"ts-loader": "^9.2.6",
"typescript": "^4.4.4",
"vue-loader": "^16.8.1"
},
"dependencies": {
"@inertiajs/inertia": "^0.10.1",
"@inertiajs/inertia-vue3": "^0.5.2",
"@inertiajs/progress": "^0.2.6",
"vue": "^3.2.20"
}
}
------------------------------ 運行“sail npm run watch”后出錯
ERROR in ./resources/js/Pages/Dashboard/Index.vue?vue&type=template&id=48cd2f5e&ts=true (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Dashboard/Index.vue?vue&type=template&id=48cd2f5e&ts=true)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/html/resources/js/Pages/Dashboard/Index.vue: Unexpected token, expected "," (3:27)
1 | import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
2 |
> 3 | export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| ^
4 | return (_openBlock(), _createElementBlock("div", null, "Isaac"))
5 | }
at Parser._raise (/var/www/html/node_modules/@babel/parser/lib/index.js:541:17)
at Parser.raiseWithData (/var/www/html/node_modules/@babel/parser/lib/index.js:534:17)
at Parser.raise (/var/www/html/node_modules/@babel/parser/lib/index.js:495:17)
at Parser.unexpected (/var/www/html/node_modules/@babel/parser/lib/index.js:3550:16)
at Parser.expect (/var/www/html/node_modules/@babel/parser/lib/index.js:3524:28)
at Parser.parseBindingList (/var/www/html/node_modules/@babel/parser/lib/index.js:10835:14)
at Parser.parseFunctionParams (/var/www/html/node_modules/@babel/parser/lib/index.js:13881:24)
at Parser.parseFunction (/var/www/html/node_modules/@babel/parser/lib/index.js:13859:10)
at Parser.parseFunctionStatement (/var/www/html/node_modules/@babel/parser/lib/index.js:13496:17)
at Parser.parseStatementContent (/var/www/html/node_modules/@babel/parser/lib/index.js:13179:21)
webpack compiled with 1 error
uj5u.com熱心網友回復：
我自己上周剛吃過這個。App在 setup 函式中將arg設為小寫：
setup({ el, app, props, plugin }) {
createApp({ render: () => h(app, props) })
uj5u.com熱心網友回復：
我知道這很愚蠢
我告訴 mix 將 ts 檔案作為 js 處理（mix.js 而不是 mix.ts）
const mix = require('laravel-mix');
mix.js('resources/js/app.ts', 'public/js').vue({version: 3})
.postCss('resources/css/app.css', 'public/css', [
//
]);
這是正確的方法
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js').vue({version: 3})
.postCss('resources/css/app.css', 'public/css', [
//
]);
就是這樣，問題解決了
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/329306.html
標籤：打字稿 Vue.js 网络包 laravel-mix 惯性