Vue-cli: Need to be able to build without creating index.html files (or any hosting file)

[shawnwildermuth]

What problem does this feature solve?

This allows vue-cli to be used in environments where there is development inside another larger server backend (e.g. ASP.NET Core, JSP, PHP, etc.). I understand that it requires a removal of the hashing of the names, but usually hashing is the responsibility of the server not the UI framework so I'm ok if this doesn't including hashing.

What does the proposed API look like?

// vue.config.js
modules.export = {
buildHostFIles: false // true by default
}

[sodatea]

See https://cli.vuejs.org/config/#filenamehashing

[shawnwildermuth]

This isn't about filenamehashing, it's out having no template or index name. Not every build needs to do a replacement to an index.html file. I just mentioned filenameHashing in that this feature doesn't need to work with filenameHashing enabled because of the inherent problems with filenameHashing and not creating the HTML file.

Please re-open since it's not a fix to point me a the filenamehashing configuration.

[sodatea]

If you don't need the generated index.html, manually remove it in your build script is the most straightforward thing to do IMHO.

Actually the html-webpack-plugin does a lot of things underlylingly. So, removing it will add complexity. Also, documentation need to be added for things like modern mode without index.html, chunk splitting without index.html, etc. So I'm reluctant to do this…

[Mizumaki]

I'm also want to build without index.html.
Ant this is heplful.

// vue.config.js
module.exports = {
  // disable hashes in filenames
  filenameHashing: false,
  // delete HTML related webpack plugins
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}

[dejan7]

This allows vue-cli to be used in environments where there is development inside another larger server backend (e.g. ASP.NET Core, JSP, PHP, etc.). I understand that it requires a removal of the hashing of the names, but usually hashing is the responsibility of the server not the UI framework so I'm ok if this doesn't including hashing.

Fully agreed, i'm facing the same problem right now.

the way i see it - there needs to be an easy way to specify two things:
1) don't generate index.html at all
2) generate JS and CSS files with the same names (i'll handle cache busting on the server side if i need to) AND in the same place. Currently the output is different for vue-cli-service build --mode development and vue-cli-service build --mode production.

[MasterOfDeath]

It's possable to generate from custom template:

// vue.config.js
module.exports = {
  chainWebpack: config => {
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');
        config
            .plugin('html')
            .tap(args => {
                args[0].template = 'public/index.js';
                args[0].inject = false;
                args[0].cache = false;
                args[0].minify = false;
                args[0].filename = 'index.php';
                return args;
            });
    },
}

// public/index.js
module.exports = function (templateParams) {
    let index = 0,
        html = '';

    html =
`<?php
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');

use Bitrix\\Main\\Page\\Asset;

$APPLICATION->SetTitle('Шахматка');

`;

    const cssFiles = templateParams.htmlWebpackPlugin.files.css;
    const jsFiles  = templateParams.htmlWebpackPlugin.files.js;

    for (index = 0; index < cssFiles.length; index++) {
        html += `Asset::getInstance()->addCss(SITE_DIR . '${cssFiles[index].substr(1)}');\n`;
    }

    for (index = 0; index < jsFiles.length; index++) {
        html += `Asset::getInstance()->addJs(SITE_DIR . '${jsFiles[index].substr(1)}');\n`;
    }

    html +=
`?>


md5-74acabf696c1094f128bb8d7745e4d31




md5-b1b816bbfbdeddbf21ae3efad40f44e5



<?php require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php');
`;

    return html;
};