如何修复错误“找不到此相关模块：* ./src/main.js in multi (webpack)-dev-server”在 npm run serve in vue3.x with typescr

Posted 2023-02-22

【中文标题】如何修复错误“找不到此相关模块：* ./src/main.js in multi (webpack)-dev-server”在 npm run serve in vue3.x with typescript？

【英文标题】：How to fix error "This relative module was not found: * ./src/main.js in multi (webpack)-dev-server" on npm run serve in vue3.x with typescript?

【发布时间】：2021-03-03 18:03:01

【问题描述】：

我正在使用 vue3.x 以及带有 typescript 的 vuex 4，我做了https://github.com/ChrisShank/vue-next-webpack-preview 中提到的所有事情，但是当我尝试使用 serve cmd 运行 vue 应用程序时，我得到了这个错误： *ERROR 编译失败，出现 2 个错误

未找到此相关模块： ./src/main.js in multi (webpack)-dev-server/client?http://192.168.100.38:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main. js, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://192.168.100.38:8081&sockPath=/sockjs-node ./src/main.js*

ma​​in.ts

import  createApp  from "vue";
import App from "./App.vue";
import  store  from "./store";

createApp(App)
  .use(store)
  .mount("#app");

store/index.ts

import  createStore  from "vuex";

export type State =  counter: number ;

const state: State =  counter: 0 ;

export const store = createStore(
  state,
  mutations: 
    increment(state, payload) 
      state.counter++;
    
  ,
  actions: 
    increment( commit ) 
      commit("increment");
    
  ,

  getters: 
    counter(state) 
      return state.counter;
    
  ,
  modules: 
);

package.json

  "name": "vue3",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "bootstrap": "^4.5.3",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "vue": "^3.0.0",
    "vuex": "^4.0.0-rc.1"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  ,
  "eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": 
      "parser": "babel-eslint"
    ,
    "rules": 
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

tsconfig.json

    "compilerOptions": 
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": 
            "@/*": [
                "src/*"
            ]
        ,
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    ,
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
    ],
    "exclude": [
        "node_modules"
    ]
 

另外，我也有 shims 文件，虽然我遇到错误，请帮我解决它？

【问题讨论】：

不需要使用webpack你可以使用vue cli 4，通过在命令行中输入vue --version来检查你计算中安装的安装版本

好吧，虽然我检查了 vue cli 版本 @vue/cli 4.5.9

，但我手动使用

如果你想配置 vue 3 + webpack 检查我的回答here 然后你可以添加 vuex 和 TS，但我建议使用 vue cli

其实我也在使用 vue cli 及其最新版本

我刚刚手动添加了 tsconfig.json，正如我在 github github.com/ChrisShank/vue-next-webpack-preview 中看到的那样，只是希望它可以工作，尽管它没有

【参考方案1】：

你安装了打字稿吗？我在开发依赖项中没有看到 typescript，这可能会帮助您解决问题。