Typescript VueJs Webpack портит мои компоненты в Firefox Отладчике - PullRequest
Новая
       14

Typescript VueJs Webpack портит мои компоненты в Firefox Отладчике

0 голосов
/ 21 марта 2020

Я компилирую свой VueJs проект с VueCLI 3 и запускаю его с vue-cli-service serve --port 4200, а затем в отладчике Firefox Я смотрю в компонентах webpack-> sr c -> и все мои компоненты выглядят так: 

export * from "-!../node_modules/cache-loader/dist/cjs.js?
{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"
cacheIdentifier\":\"7e676d69-vue-loader-template\"}!../
node_modules/vue-loader/lib/loaders/templateLoader.js??
vue-loader-options!../node_modules/cache-loader/dist/cjs.js??ref--0-0!
../node_modules/vue-loader/lib/index.js??vue-loader-options!
./App.vue?vue&type=template&id=7ba5bd90&"

Есть ли какая-либо конфигурация, которую мне нужно изменить, чтобы мои компоненты снова можно было отлаживать в Brwoser?

Мой пакет. json: 

{
  "scripts": {
    "serve": "vue-cli-service serve --port 4200",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "rxjs": "^6.5.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.18.0",
    "@typescript-eslint/parser": "^2.18.0",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.1.2",
    "lint-staged": "^9.5.0",
    "prettier": "^1.19.1",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "@typescript-eslint/no-empty-function": 1
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

Мой tsconfig. ts: 

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