vue-cli 项目源地图不工作/如何开始工作

Question

我使用 vue-cli(

@vue/cli 4.3.1

) 创建了一个新项目。当我的一个组件文件（.vue 文件）出现错误时，在 chrome 控制台中我看不到实际的文件/行号。相反，我看到一个名为

vue.runtime.esm.js?2b0e:619

的文件引用。谷歌搜索了如何启用源地图。我在我的项目根目录下添加了一个

vue.config.js

文件并添加了以下几行：

module.exports = {
   configureWebpack: (config) => {
       config.devtool = 'eval-source-map'
   },
   productionSourceMap: true
};

做了

npm run server

。但我仍然没有看到实际的文件参考。

如何在 vue-cli-project 中启用 source map？？

\\File: packages.json
{
  "name": "real-world-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint",
    "build-watch": "vue-cli-service build-watch --mode development"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "json-server": "^0.16.1",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuejs-datepicker": "^1.6.2",
    "vuex": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-plugin-vuex": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.14.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-build-watch": "~1.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

Please help.

Answer 1

就我而言，我在

devtool

下使用

configureWebpack

让它工作，所以那里没有

config

字段。

我还必须使用

'cheap-module-source-map'

而不是

'eval-source-map'

。最后它看起来像这样：

module.exports = {
  configureWebpack: {
    devtool: "cheap-module-source-map",
  },
   productionSourceMap: true
};

Answer 2

提前打开chrome控制台，在文件中添加“debugger”，然后（“command”+“s”）保存要调试的文件，按如下步骤操作即可。