子文件夹中的 Vue CLI 3 SPA，根目录中的静态 HTML 页面答案

【问题标题】：Vue CLI 3 SPA in Subfolder, Static HTML Pages in Root子文件夹中的 Vue CLI 3 SPA，根目录中的静态 HTML 页面
【发布时间】：2020-04-24 15:02:15
【问题描述】：

如何使用 Vue CLI 3 创建一个项目，该项目在公共目录的根目录中包含一些静态 html 文件，并在应用程序文件夹中包含一个 SPA？

我想要几个静态 html 文件，包括项目根目录下的 index.html。我希望这些静态 HTML 文件在 SPA 之外用于 SEO 目的。

现在，我的项目结构如下：

.
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── app
│   │   └── index.html
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── vue.config.js
└── yarn.lock

我在vue.config.js 文件中尝试了publicPath 和indexPath 值的许多不同组合。没有人达到我所希望的。我希望 yarn serve 在本地为静态 HTML 文件和 SPA 提供开发服务。更重要的是，我希望在运行 yarn build 时将静态 HTML 文件和 SPA 正确捆绑到 dist 文件夹中。这两个目标我都没能实现。

通过以下配置，本应为静态且仅显示在 / 的 public/index.html 文件同时在 http://localhost:8080/ 和 http://localhost:8080/app/ 上提供服务。有趣的是，在http://localhost:8080/app/，js 资源与静态 HTML 一起被注入到响应中。

使用下面的配置运行 yarn build 后，我留下了一个 /dist/app/index.html 文件，该文件具有静态 index.html 文件代码，没有注入 javascript 而不是 SPA注入了 javascript 的代码。 /dist/index.html 文件具有我期望的静态 HTML，但注入了所有用于 SPA 的 javascript。

// vue.config.js
module.exports = {
    publicPath: '/app/',
    indexPath: 'index.html'
}

如何配置此项目以支持项目根目录中的静态 html 文件和 app 文件夹中的 SPA？

【问题讨论】：

我认为出于 SEO 目的，您必须使用 NuxtJS，它将您的组件作为 HTML 文件提供。
@KushalSuthar 我考虑过使用 NuxtJS，但这对于我关心 SEO 的几个页面来说似乎有点过分了。已接受答案中的多页应用程序选项效果非常好。

标签： javascript vue.js vue-cli-3

【解决方案1】：

你可以利用 Vue CLI 的功能来build multipage apps 并且实际上只有一页......

// vue.config.js
module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: "src/main.js",
      // the source template
      template: "public/app/index.html",
      // output as dist/app/index.html
      filename: "app/index.html",
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: "App Index Page",
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ["chunk-vendors", "chunk-common", "index"]
    }
  }
};

【讨论】：