CODEWITHSUNDEEP
vue.jsvuejs2multi-page-application
TangoAlee
TangoAlee

Reputation: 1380

Vuejs MPA and indexPath per page

in vue.config.js - one can set the output location and file name of the index.html using indexPath

e.g. vue.config.js

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

will output the index.html file to backend/api/templates named "base.html".

I want to build an MPA where several htmls are generated.

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",
...

However I can only get index.html to be renamed to base-vue.html.

I want to be able to have about.html output into a specific folder with a specific name. Is this possible?

Upvotes: 1

Views: 510

Answers (1)

TangoAlee
TangoAlee

Reputation: 1380

For posterity - thanks to wrksx on Vue Land discord:

The filename field can include a path relative to the 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",

outputs:

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

Upvotes: 2

Related Questions