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

问题描述

我使用 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*

main.ts

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

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

存储/索引.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: {}
});

包.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 文件，虽然我收到错误，请帮我解决它？

标签： typescriptvuexvuejs3

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

问题描述

解决方案

推荐阅读