Vue + Typescript + Webpack：模块构建失败 - 找不到 vue.esm.js

Posted 2023-03-13

【中文标题】Vue + Typescript + Webpack：模块构建失败 - 找不到 vue.esm.js

【英文标题】：Vue + Typescript + Webpack: Module build failing - Can't find vue.esm.js

【发布时间】：2018-01-28 07:44:56

【问题描述】：

我正在尝试使用 typescript、webpack 和 vue.js 构建一个基本项目。但是，当我从命令行运行 webpack 时，我目前收到以下错误：

ERROR in ./node_modules/vue/dist/vue.esm.js
Module build failed: Error: Could not find file: 'c:\Users\user\Games\javascriptTimeGame\node_modules\vue\dist\vue.esm.js'.
    at getValidSourceFile (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89078:23)
    at Object.getEmitOutput (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89448:30)
    at getEmit (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:122:43)
    at successLoader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:42:11)
    at Object.loader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:29:12)

这很奇怪，因为它说找不到的文件肯定在那里。

我的主脚本：script.ts，看起来像：

import Vue from 'vue'

function main()
  let vueApp = new Vue(
    el: "#vue-test",
    data : 
      message: "Hello World"
    
  );


main();

我的tsconfig.json 看起来像：

  "compileOnSave":  true,
  "compilerOptions": 
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "../jsDist",
    "allowJs": true
  

我的 package.json 开发依赖项如下所示：

  "devDependencies": 
    "@types/vue": "^2.0.0",
    "http-server": "^0.10.0",
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.0.2",
    "ts-loader": "^2.3.3",
    "typescript": "^2.4.2",
    "vue": "^2.4.2",
    "watch": "^1.0.2",
    "webpack": "^3.5.5"
  

我的webpack.config.js 看起来像：

module.exports = 
    devtool: 'inline-source-map',
    entry: "./ts/script.ts",
    output: 
        filename: "bundle.js",
        path: `$__dirname/jsDist`
    ,
    module: 
        rules : [
            
                loader: 'ts-loader'
            
        ]
    ,
    resolve: 
        extensions: ['.ts', '.js'],
        alias: 
            'vue$': 'vue/dist/vue.esm.js'
        ,
    

我注意到的几件事可能会隔离问题。

首先，如果我只是简单地运行tsc 以使用 typescript 编译器直接构建我的源文件，那么它可以完美运行而不会出错。这表明 webpack 部分有问题。

其次，如果我将 script.ts 更改为：

import Vue from 'vue'

function main()
  console.log("Harmless");


main();

然后 webpack 毫不费力地构建它。这表明 webpack 似乎有问题的不是***导入，而是 Vue 的用法。

最后，如果我更改我的 webpack.config.js 以使 ts-loader 具有附加选项 transpileOnly: true 那么它似乎也可以毫不费力地构建（但我当然不想这样做，因为那样我就输了我首先使用打字稿的原因！）

任何想法可能导致此错误？

【参考方案1】：

试试这个：

import Vue from 'vue';

let vueApp = ;

if (document.querySelector('#authorities-container')) 
  vueApp = new Vue(
    el: "#vue-test",
    data : 
      message: "Hello World"
    
  );
;

export vueApp