Vue 2 + Webpack 通用导入对一个应用程序有效，但对另一个应用程序失败答案

【问题标题】：Vue 2 + Webpack common imports work for one app but fail for anotherVue 2 + Webpack 通用导入对一个应用程序有效，但对另一个应用程序失败
【发布时间】：2022-01-23 23:49:16
【问题描述】：

这个问题已经让我好几天都拔头发了。我一直在研究一个由两个单页 Vue 应用程序组成的项目——如果你愿意，可以是一个两页应用程序。这些应用程序共享一些通用功能，因此已将其外推到/utilities、/state 和/mixins 文件夹中。相当标准的东西。

src/
├─ apps/
│  ├─ admin/
│  │  ├─ main.js
│  │  ├─ app.vue      <-- mixins imported
│  ├─ customer/
│  │  ├─ main.js
│  │  ├─ app.vue      <-- mixins imported
├─ mixins/
├─ state/
├─ utilities/
├─ vue.config.js

我使用 webpack 为这些路径设置别名，这样我就可以在没有讨厌的相对路径的情况下访问它们。

// vue.config.js
const path = require('path');

module.exports = {
  // Put this in the ASP.NET Core directory
  outputDir: "../wwwroot/app",
  pages: {
    admin: "src/apps/admin/main.js",
    customer: "src/apps/customer/main.js",
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@app': path.resolve(__dirname, 'src/'),
        '@customer': path.resolve(__dirname, 'src/apps/customer/'),
        '@admin': path.resolve(__dirname, 'src/apps/admin/'),
        '@mixins': path.resolve(__dirname, 'src/mixins/'),
        '@utilities': path.resolve(__dirname, 'src/utilities/'),
      }
    }
  }
};

这一切都适用于客户应用程序，通过以下方式访问 mixin 代码：

import { mixin } from '@mixins';

但是管理应用程序给我带来了一些我似乎无法解决的严重问题。 vue-cli-service 成功构建项目，没有任何错误，但是当我加载浏览器时，我得到一个空白屏幕。没有控制台错误，什么都没有。最糟糕的是我可以在管理应用程序中访问别名@state 和@utilities 而没有任何问题。只有@mixins 给我带来了任何问题，而我终其一生都无法弄清楚原因。

为了进行完整性检查，我将每个单独的 mixin 复制到一个别名为 @common 的新文件夹中，并从管理应用程序上导入该文件夹，以尝试查找可能导致问题的文件。我把每一个都抄了一遍，它从来没有坏过。然后，我将客户应用程序中的一个@mixins 导入切换到@common，然后再次出现没有错误的白屏。我什至尝试恢复相对进口作为冰雹玛丽 - 但问题仍然存在。如果两个应用程序都想从 mixins 文件夹中导入，就好像整个项目都搞砸了，即使只有一个也可以？

我对此束手无策。有谁知道这里可能会发生什么，因为我完全迷路了。

【问题讨论】：

标签： javascript vue.js webpack vue-cli

【解决方案1】：

如果有人在这里结束，请确保您的 html 包含 webpacked chunk-common.js 作为脚本。我同时包含了应用程序的单个 js 文件和 chunk-vendors.js，但是，当在两个应用程序中包含 mixins 时，整个 @mixins 文件夹被提取到不再可用的公共文件夹中。令人惊讶的是，失败完全没有出现，我通常会认为浏览器控制台会出现某种类型的错误。

这个问题的根源有点模糊，因为尽管缺少通用脚本，其他一些具有共享脚本的文件夹（@utilities 和@state）仍然可以工作。我无法解释除了 webpack 并没有将它们提取出来，因为它们可能太小了？无论如何，请务必检查您的 webpack 基础知识。希望这至少对一个人有所帮助，因为这对我来说只是一个时间槽。

【讨论】：