小编bjo*_*n_h的帖子

编辑 [2019年7月23日]

经过进一步研究，我发现并非所有 .vue 文件都有这个问题。有些仍然显示原始源代码。看起来使用的加载器之一可能是问题的罪魁祸首（“vue-loader”作为我的第一个“目标”）。

在显示源代码的文件中，源映射文件的相关部分如下所示：

而没有源代码的文件中源映射的相同部分如下所示：

因此，由于某种原因，后一种类型的文件似乎缺少 vue-loader 的“和谐默认导出”。

上一期文本

几天后，我的 .vue 文件的源映射不再包含原始代码 (sourcesContent)。Webpack 生成了许多源映射文件，但它们都不包含实际代码：只有缩小或以其他方式“压缩”的代码版本，这些版本不太可用。它们看起来像这样：

我的项目中的 Typescript (.ts) 文件看起来几乎正确，但仍然包含一些细微的修改，例如：

我尝试过的： - 我搜索了 Stackoverflow，发现了许多类似的问题（例如WebPack sourcemaps 混淆（重复的文件））以及可能的修复，但没有一个解决了我的问题；- 我将最新的（Webpack）更改与大约一周（和两周）前的更改进行了比较，当时一切正常。我还将它与一个非常相似的项目进行了比较，该项目仍然生成正确的源映射，包括 .vue 文件。- 我已经尝试了 Webpack 配置中“devtool”设置的各种设置，但没有任何帮助。- 我没有使用 Uglify（当人们对源映射有问题时会经常提到 Uglify），所以这不可能是问题；- 我尝试更新一些与构建相关的包，以便它们与仍然正常工作的项目的包相同，但问题仍然存在。- 我检查了不同的浏览器，但 Chrome 和 Firefox 中都出现了问题（并且我检查了它们的源映射设置是否设置为“打开”，因为其他项目正在使用相同的设置，所以它们必须如此）。我什至尝试过 IE11，但这也没有帮助。

我在 package.json 中的启动脚本如下所示：

 "build-watch": "webpack -d --watch true --config webpack.dev.config.js",
 "build-release": "webpack -p --config webpack.production.config.js",
 "build-dev": "webpack -d --config webpack.dev.config.js",

devDependency 看起来像这样：

"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-typescript": "^7.3.3", …

在我的应用程序中，我想在应用程序的其余部分启动之前初始化 3 个 Vuex 模块。然而，无论我如何尝试，Vue 实例生命周期挂钩中执行初始化的代码都会在 3 个模块完成初始化之前继续运行。

我在执行初始化的 Vuex 操作中的代码周围添加了一个承诺，以便我可以 (a) 等待调用生命周期挂钩中的代码，但它不起作用。

我查看了使用 Axios 的示例 Vuex 代码，我必须使我的代码与此类似，但没有成功。

我尝试使用“Promise.all(...)”在“beforeCreate”生命周期挂钩中进行 init 调用，但这仍然没有解决问题。

我的主 Vue 实例的代码如下所示：

new Vue({
  router,
  store,
  async beforeCreate() {
    await this.$store.dispatch('init')
  },
  render: h => h(App)
}).$mount('#app')

Vuex 存储由 3 个模块组成，所有模块都有一个“init”操作。所有 3 个模块中的操作代码都是相同的。下面的代码中凡是有“XXX”的地方，每个模块的调用都会略有不同；

  init: ({commit, dispatch}) => {
    return new Promise((resolve, reject) => {
      console.log('Start of init of XXX');
      Axios.get(`api/xxx`).then(response => {
        return response.data;
      }, error => {
        console.log('An error occured: ', error);
        reject(error);
      }).then(data => {
        const …