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

Posted 2023-02-22

【中文标题】模块构建失败：错误：找不到文件：\'[my-project-directory]\\src\\App.vue\'

【英文标题】：Module build failed: Error: Could not find file: '[my-project-directory]\src\App.vue'模块构建失败：错误：找不到文件：'[my-project-directory]\src\App.vue'

【发布时间】：2018-01-16 07:20:48

【问题描述】：

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

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

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

我已在 src 目录的根目录中添加了一个 resources.d.ts 文件，但我不确定它是如何被引用的：

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'。”：

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;
    ;

我的 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"
    ]
  

我的 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]\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

【问题讨论】：

Vuejs has typescript support built in.

可以，但在使用单个 .vue 文件时不行。

【参考方案1】：

你用过 ts-loader 吗？

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

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

【参考方案2】：

Typescript doesn't work with the file extensions in the import statements。另外，vue has had typescript support v2.2 起。

如果您阅读了有关 typescript 的链接 vuejs 指南，它应该会对您的特定设置有所了解。它引用了a decorator style 方法来声明您可能会觉得有用的组件。

也许play with this cli tool 看看 webpack + typescript 的样子，它可以帮助您了解如何更好地进行自己的迁移。

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

【讨论】：

感谢您提供的信息，非常有帮助。我可以使用你提到的 cli。虽然我想将我的 vue 保存在一个 .vue 文件中（除了偏好之外没有其他原因）。并且还可以不包含该特定 cli 提供的所有包选项。

【参考方案3】：

我找到了导致此特定错误的问题。虽然我仍在处理其他问题，但它是我特定问题的答案。是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”并引发覆盖错误（除了它看起来很糟糕！）。

【讨论】：

有趣！很高兴你想出来了。干杯！

我的 CLI 研究更新。在此拉取请求中定义了使这更容易的 CLI 选项：github.com/vuejs-templates/webpack/pull/797 同时，此示例项目似乎与我正在寻找的内容非常匹配：github.com/johnlindquist/vue-typescript-simple/tree/master/…

【参考方案4】：

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