Version

3.0.0-rc.3

Reproduction link

https://github.com/rocwang/vue-cli-html-file-name

Steps to reproduce

1. Clone the repo
2. cd to the repo directory
3. yarn install
4. yarn build --modern

What is expected?

The building process finishes without error.
The generated index.html should be under the folder named subdirectory

What is actually happening?

The following error messages show in the console and the building process stucks at the Building legacy bundle for production... step:

(node:14710) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Users/roc/Projects/vue-cli/packages/test/test-app/dist/legacy-assets-subdirectory/index.html.json' (node:14710) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:14710) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. 

I was building a custom vue-cli integration for a Shopify theme, which requires generating the final index.html as theme.liquid inside the subdirectory namely layout, i.e. layout/theme.liquid

I use vue.conf.js to tap into the HTML Webpack plugin and customize the output filename. According to the documentation, the plugin does support subdirectory in the filename option. However, inside ModernModePlugin.js, the line 27 and the line 52 assume the htmlName would be a simple filename like index.html without any prefixed subdirectories. When you actually change the output HTML filename to be something like subdirectory/index.html, legacy-assets-${htmlName}.json would be like legacy-assets-subdirectory/index.html.json, which would not exist and hence the error messages.

I'll create a pull request to fix this and link it back to this issue.