Typescript 模块生成失败:错误:找不到文件:';[我的项目目录]\src\App.vue';
[我的项目目录]是我的项目的完整路径 根据vue.js官方文档,我通过“vue init webpack my project”开始了webpack项目 我试图通过添加vuetype切换到TypeScript 我已将resources.d.ts文件添加到src目录的根目录中,但我不确定它是如何被引用的:Typescript 模块生成失败:错误:找不到文件:';[我的项目目录]\src\App.vue';,typescript,webpack,vue.js,Typescript,Webpack,Vue.js,[我的项目目录]是我的项目的完整路径 根据vue.js官方文档,我通过“vue init webpack my project”开始了webpack项目 我试图通过添加vuetype切换到TypeScript 我已将resources.d.ts文件添加到src目录的根目录中,但我不确定它是如何被引用的: declare module "*.vue" { import Vue from 'vue' export default Vue } 我已在webpack.base.conf.js中
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]')
}
}
]
}
}
这是我的main.ts文件。请注意,如果我将导入更改为“./App”(没有.vue,它会显示“(2,17):错误TS2307:找不到模块“./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>
My package.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"
]
}
下面是全部错误:
Module build failed: Error: Could not find file: '[MyDirectory]\src\App.vue'.
error in ./src/App.vue
Module build failed: Error: Could not find file: '[my-project-directory]\
src\App.vue'.
at getValidSourceFile ([my-user-directory]\npm\node_modules
\typescript\lib\typescript.js:89078:23)
at Object.getEmitOutput ([my-user-directory]\npm\node_modul
es\typescript\lib\typescript.js:89448:30)
at getEmit ([my-project-directory]\node_modules\ts-loader\dist\index.
js:114:43)
at successLoader ([my-project-directory]\node_modules\ts-loader\dist\
index.js:34:11)
at Object.loader ([my-project-directory]\node_modules\ts-loader\dist\
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
.此外,自v2.2以来
如果您仔细阅读了typescript的链接vuejs指南,它应该会对您的特定设置有所帮助。它引用了一种声明组件的方法,您可能会发现这种方法很有用
也许可以看看webpack+typescript是什么样子,它可以帮助您更好地完成自己的迁移
因此,也许可以尝试在不使用vuetype的情况下使用Vue+Webpack+Typescript-尽管vuetype在需要生成旧式组件的
.d.ts
文件时仍然很有用,但我想…我不知道,我坚持使用单文件组件样式。我发现了导致此特定错误的问题。尽管我仍在使用其他问题,这是对我的特定问题的回答。因为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”的文件,并抛出一个覆盖错误(除了看起来很糟糕之外!)。是否使用了ts loader
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
把这个放在webpack.base.conf.js中,我也遇到了同样的问题,我尝试应用上面答案中的建议,但仍然得到了同样的错误。我的诀窍是将我的
main.js
更改为main.ts
,并更改build/webpack.base.conf.js
中的入口点以反映ew ending.。是的,但在使用单个.vue文件时不是这样。感谢您提供的信息,这非常有用。我可以使用您提到的cli。尽管我想将我的vue保存在一个.vue文件中(除首选项外,没有其他原因)。并且还能够不包含该特定cli提供的所有包选项。有趣!很高兴你找到了它。干杯!我的cli研究的更新。可以让这更简单的cli选项是在这个拉取请求上定义的:同时,这个示例项目似乎很适合我在或:
Module build failed: Error: Could not find file: '[MyDirectory]\src\App.vue'.
error in ./src/App.vue
Module build failed: Error: Could not find file: '[my-project-directory]\
src\App.vue'.
at getValidSourceFile ([my-user-directory]\npm\node_modules
\typescript\lib\typescript.js:89078:23)
at Object.getEmitOutput ([my-user-directory]\npm\node_modul
es\typescript\lib\typescript.js:89448:30)
at getEmit ([my-project-directory]\node_modules\ts-loader\dist\index.
js:114:43)
at successLoader ([my-project-directory]\node_modules\ts-loader\dist\
index.js:34:11)
at Object.loader ([my-project-directory]\node_modules\ts-loader\dist\
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
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}