如何解决为什么我在 webpack-dev-server 重新编译时收到“找不到模块...”的“.vue”文件的打字稿错误?
我设置了一个小型 webpack 项目,该项目创建了一个 Vue 应用程序包,该包包含在注入应用程序的静态 HTML 文件中。我想用 Typescript 编写组件,所以我在 webapck 配置中包含了 ts-loader。构建过程 - 使用“webpack”命令 - 工作正常,但我在使用 webpack-dev-server 时遇到了一些问题。
当我最初启动服务器时,一切正常:在我的本地服务器上创建并提供包,浏览器正确显示应用程序。但是,当我更改源代码并保存时,重新编译代码时出现 Typescript 错误,告诉我组件的“.vue”文件缺少模块或声明:
TS2307: Cannot find module './components/Banner.vue' or its corresponding type declarations.
要启动服务器,我使用以下命令:
webpack serve --open
========
webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
module.exports = {
mode: 'development',devtool: 'inline-source-map',entry: {
app: './src/app.js',},output: {
filename: '[name].bundle.js',plugins: [
new VueLoaderPlugin(),],devServer: {
contentBase: path.join(__dirname,'dist'),module: {
rules: [
{
test: /\.vue$/,use: ['vue-loader']
},{
test: /\.ts$/,loader: 'ts-loader',exclude: [/node_modules/],options: { appendTsSuffixTo: [/\.vue$/] }
},}
app.js
import Vue from 'vue'
import App from './App.vue'
const app = new Vue({
render: (h) => h(App)
})
app.$mount('#app')
App.vue
<template>
<div id="app">
<h1>{{ welcomeMessage }}</h1>
<Banner />
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Banner from './components/Banner.vue'
export default Vue.extend({
components: {
Banner,data: () => ({
welcomeMessage: 'Hello World!'
})
})
</script>
tsconfig.json
{
"compilerOptions": {
"target": "es5","strict": true,"module": "es2015","moduleResolution": "node"
}
}
@types/vue-shims.d.ts
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
package.json
{
"name": "2021-06-21-webpack","version": "1.0.0","description": "","main": "index.js","scripts": {
"build": "webpack","dev": "webpack serve --open"
},"keywords": [],"author": "","license": "ISC","devDependencies": {
"ts-loader": "^8.3.0","typescript": "^4.3.4","vue-loader": "^15.9.7","vue-template-compiler": "^2.6.14","webpack": "^4.46.0","webpack-cli": "^4.7.2","webpack-dev-server": "^3.11.2"
},"dependencies": {
"vue": "^2.6.14"
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。