模块构建失败：错误：找不到文件：'[my-project-directory]srcApp.vue'

Question

[my-project-directory] 是我项目的完整路径。

我通过"vue init webpack my-project"开始了webpack项目，根据官方的Vue.js文档。

我正在尝试通过添加 vuetype 切换到 TypeScript。

我已经将一个 resources.d.ts 文件添加到我的 src 目录的根目录中，尽管我不确定它是如何被引用的：

declare module "*.vue" {
import Vue from 'vue'
export default Vue
}

我已经在webpack.base.conf.js中将条目切换到ts：

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.ts'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.ts', '.vue', '.json'],
alias: {
'@': resolve('src')
}
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

这是我的主.ts文件。请注意，如果我将导入更改为"./App"(不带 .vue，它会给我"(2,17(：错误 TS2307：找不到模块'./App'。

import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})

在 App.vue 中，我添加了 lang="ts"，使用了 vuetype 库中的组件：

<template>
<div>TEST</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Component
export default class App extends Vue  {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

App.vue.d.ts 输出：

import Vue from 'vue';
export default class App extends Vue {
name: 'app';
components: {
Hello;
Game;
};
}

我的包.json：

{
"name": "dominant-species",
"version": "1.0.0",
"description": "A Game",
"author": "Frank Rizzi",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
"dependencies": {
"@types/core-js": "^0.9.42",
"core-js": "^2.5.0",
"ts-loader": "^2.3.2",
"vue": "^2.4.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"url-loader": "^0.5.8",
"vue-class-component": "^5.0.2",
"vue-loader": "^12.1.0",
"vue-property-decorator": "^5.2.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "2.4.2",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

My tsconfig.json：

{
"compilerOptions": {
// ... other options omitted
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"lib": [
"es6", "es2015.promise", "es2015.iterable", "dom","dom.iterable","es2015"
],
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true, 
"target": "es6",
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

这是完整的错误：

Module build failed: Error: Could not find file: '[MyDirectory]srcApp.vue'.

error  in ./src/App.vue
Module build failed: Error: Could not find file: '[my-project-directory]
srcApp.vue'.
at getValidSourceFile ([my-user-directory]npmnode_modules
typescriptlibtypescript.js:89078:23)
at Object.getEmitOutput ([my-user-directory]npmnode_modul
estypescriptlibtypescript.js:89448:30)
at getEmit ([my-project-directory]node_modulests-loaderdistindex.
js:114:43)
at successLoader ([my-project-directory]node_modulests-loaderdist
index.js:34:11)
at Object.loader ([my-project-directory]node_modulests-loaderdist
index.js:21:12)
@ ./src/App.vue 8:2-94
@ ./src/main.ts
@ multi ./build/dev-client ./src/main.ts

版本：

node -v
v6.11.2
npm -v
3.10.10
tsc -v
Version 2.4.2

Answer 1

你用过ts-loader吗？

{
test: /.ts$/,
exclude: /node_modules|vue/src/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/.vue$/]
}
}

把它放在webpack.base.conf中.js

Answer 2

我发现了导致此特定错误的问题。虽然我仍在处理其他问题，但这是我特定问题的答案。因为来自 vuetype 的输出文件是"App.vue.d.ts"，所以导入的 './App.vue' 是直接查看 "App.vue" 文件而不是 "App.vue.d.ts"。我可以通过将导入更改为"./App.vue.d"来验证这一点，它会选择正确的导入。因此，它选择确切的文件名匹配而不是部分文件名匹配，这是非常有意义的。

作为旁注，如果我想继续使用 vuetype 来解决我的问题，而不是像 Sean 建议的那样使用另一个 cli，那么我需要弄清楚如何在其他地方写出 d 文件或以其他方式引用它们。

具有讽刺意味的是，"./App.vue.d.ts"由于其扩展名(即"ts"(而无法解析，但"./App.vue"确实因其扩展名而解析。

此外，似乎 vuetype 不只是查找 .vue 文件，它会以某种方式跟踪导入，因此如果我将导入设置为"./App.vue.d"，它将尝试为文件"App.vue.d.ts"发出一个名为"App.vue.d.ts"的文件并抛出覆盖错误(除了它看起来很糟糕！

Answer 3

Typescript 不适用于导入语句中的文件扩展名。此外，vue 从 v2.2 开始就有了打字稿支持。

如果您阅读了打字稿的链接 vuejs 指南，它应该会阐明您的特定设置。它引用了一种装饰器样式方法来声明您可能觉得有用的组件。

也许使用这个 cli 工具看看 webpack + 打字稿是什么样子的，它可以帮助您了解如何更好地进行自己的迁移。

所以，也许尝试在没有 vuetype 的情况下使用 Vue + Webpack + Typescript - 尽管如果您需要生成旧式组件的.d.ts文件，vuetype 仍然很有用，我想......我不知道，我坚持单文件组件风格。

Answer 4

我遇到了同样的问题，我尝试应用上述答案中的建议，但我仍然不断收到相同的错误。对我来说，诀窍是将我的main.js更改为main.ts，并更改build/webpack.base.conf.js中的入口点以反映新的结局。