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

Question

如何使用 Vue CLI 3 创建一个项目，该项目在 public 目录的根目录下包含一些静态 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

我尝试了很多不同的 publicPath and indexPath values in my vue.config.js 文件组合。 None 已经达到了我的期望。我希望 yarn serve 在本地为静态 HTML 文件和 SPA 提供服务以进行开发。更重要的是，当我运行 yarn build 时，我希望将静态 HTML 文件和 SPA 正确地捆绑到 dist 文件夹中。这两个目标我都没能实现。

使用下面的配置，public/index.html 文件本来是静态的，只显示在 / 上，http://localhost:8080/ and http://localhost:8080/app/. Interestingly, at http://localhost:8080/app/ js 资源被注入响应以及静态的内容 HTML.

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

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

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

Answer 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"]
    }
  }
};

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

Vue CLI 3 SPA in Subfolder, Static HTML Pages in Root

javascript

vue.js

vue-cli-3