时间戳

首页 > 解决方案 > 每页的 Vuejs MPA 和 indexPath

vue.js - 每页的 Vuejs MPA 和 indexPath

问题描述

in - 可以设置使用vue.config.js的输出位置和文件名index.htmlindexPath

例如vue.config.js

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

将index.html文件输出到backend/api/templatesnamed "base.html"。

我想构建一个生成多个 html 的 MPA。

通过：

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输出输出到具有特定名称的特定文件夹中。 这可能吗？

标签： vue.jsvuejs2multi-page-application

解决方案

为了后代 - 感谢 Vue Land discord 上的 wrksx：

该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

推荐阅读