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

Question

使用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

我在publicPath文件中尝试了indexPath和vue.config.js值的许多不同组合。没有一个能达到我的期望。我希望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？

Answer 1

这呢？

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