每页的 Vuejs MPA 和 indexPath

Posted 2023-02-22

【中文标题】每页的 Vuejs MPA 和 indexPath

【英文标题】：Vuejs MPA and indexPath per page

【发布时间】：2020-12-28 04:40:09

【问题描述】：

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

例如vue.config.js

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

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

我想构建一个生成多个 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 输出到具有特定名称的特定文件夹中。 这可能吗？

【参考方案1】：

为了后代 - 感谢 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