每页Vuejs MPA和indexPath

Question

在vue.config.js中，可以使用indexPath设置index.html的输出位置和文件名。

例如vue.config.js

module.exports = {
    indexPath: "../backend/api/templates/base.html"
}

将index.html文件输出到名为"base.html"的backend/api/templates。

我想要建立一个MPA，其中产生了几个html。

via：

module.exports = {
    pages: {
        index: {
            entry: "./src/pages/home/main.ts",
            template: "public/index.html",
            filename: "index.html",
            chunks: ["chunk-vendors", "index"]
        },
        about: {
            entry: "./src/pages/about/main.ts",
            template: "public/index.html",
            filename: "about.html",
            chunks: ["chunk-vendors", "about"]
        }
    },

    outputDir: "backend/api/static/dist",
    assetsDir: "static",
    indexPath: "../backend/api/templates/base-vue.html",
...

但是，我只能将index.html重命名为base-vue.html。

我希望能够将about.html 输出到具有特定名称的特定文件夹中。可以吗？

Answer 1

为了子孙后代-多亏了沃德土地上的矛盾：

filename字段可以包含相对于outputDir的路径。

module.exports = {
    pages: {
        index: {
            entry: "./src/pages/home/main.ts",
            template: "public/index.html",
            filename: "../../templates/base-vue.html",
            chunks: ["chunk-vendors", "index"]
        },
        about: {
            entry: "./src/pages/about/main.ts",
            template: "public/index.html",
            filename: "../../templates/base-vue-about.html",
            chunks: ["chunk-vendors", "about"]
        }
    },

    outputDir: "backend/api/static/dist",
// not needed   assetsDir: "static",
// not needed   indexPath: "../backend/api/templates/base-vue.html",

产出：

backend
|---api
    |---static
    |   |--- dist
    |   |      payload of js, css, img etc
    |---templates
        |--- base-vue.html
        |--- base-vue-about.html