laravel - Laravel Vuejs 和 Typescript -> npm run watch 抛出异常
问题描述
简而言之,我的设置:laravel 8 typescript vuejs
tsconfig.js
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
},
"include": [
"resources/js/**/*",
]
}
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/pages/user/configuration/configuration.js', 'public/js/pages/user/configuration')
.postCss('resources/css/app.css', 'public/css')
.postCss('node_modules/animate.css/animate.min.css', 'public/css')
.sass('resources/sass/toolbox.scss', 'public/css')
.vue()
.webpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/,
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
}
});
配置页面.vue
<template>
<div class="col col-12 col-xl-6 d-flex tb-m-b-25">
{{ greeting }}
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const greeting= ref('hello');
return {
greeting
}
}
}
</script>
<style></style>
我的 package.json 中的 DevDependencies:
"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"axios": "^0.21.1",
"cross-env": "^7.0",
"laravel-mix": "^6.0",
"lodash": "^4.17.21",
"postcss": "^8.3.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"ts-loader": "^9.2.2",
"typescript": "^4.3.2",
"vue-loader": "^16.2.0",
"vue-template-compiler": "^2.6.13"
},
文件/文件夹结构
resources
| js
| | pages
| | | user
| | | | configuration
| | | | | - configuration.js
| | | | | - ConfigurationPage.vue
| - app.js
| - init.ts
init.ts 是空的。如果我的资源文件夹中没有至少一个 .ts 文件,则 ts-loader 会抛出异常,说它找不到要编译的东西。我正在阅读,通常使用空的打字稿文件。
问题
每次我在ConfigurationPage.vue中进行更改时,我都会在npm run watch-poll中得到这个执行:
✖ Mix
Compiled with some errors in 510.02ms
ERROR in /var/www/resources/js/init.ts
2:7-13
[tsl] ERROR in /var/www/resources/js/init.ts(2,8)
TS2339: Property '__file' does not exist on type '{}'.
webpack compiled with 1 error
我不明白,init.ts 是空的。对我来说完全是无稽之谈。
解决方案
您正在使用 app.js 文件作为入口文件。将此更改为 app.ts 解决了此问题。
也在 webpack.mix.js
.vue() 替换为 .vue({ version: 3 })
推荐阅读
- at-command - Ubuntu 18.04下Sierra无线MC7455无法连接互联网
- jestjs - 使用 Jest & Enzyme 模拟按钮点击
- autodesk-forge - AggregatedView 的 keepCurrentModels 选项
- vue.js - 预期的模拟函数已被调用,但未被调用。Vue-Jest-Utils
- spring-boot - Spring Boot + Serenity + Cucumber 进行 Rest API 集成测试
- java - 关于无法分配内存的 JVM 崩溃
- python - Pyspark 使用 map 函数应用于列列表
- powershell - 用于排除 csv 中名称的 powershell 函数
- react-native - 从 React Native 中的另一个组件调用“帮助器”函数?
- flutter - 如何从 ChangeNotifier 推送路由?