Different template html file in public folder is copied to dist

alinkedd commented 3 years ago

Version

4.5.13

Environment info

Click to expand

``` System: OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa) CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz Binaries: Node: 14.17.0 - /usr/bin/node Yarn: 1.22.10 - /usr/bin/yarn npm: 7.17.0 - /usr/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @vue/babel-helper-vue-jsx-merge-props: 1.2.1 @vue/babel-helper-vue-transform-on: 1.0.2 @vue/babel-plugin-jsx: 1.0.7 @vue/babel-plugin-transform-vue-jsx: 1.2.1 @vue/babel-preset-app: 4.5.13 @vue/babel-preset-jsx: 1.2.4 @vue/babel-sugar-composition-api-inject-h: 1.2.1 @vue/babel-sugar-composition-api-render-instance: 1.2.4 @vue/babel-sugar-functional-vue: 1.2.2 @vue/babel-sugar-inject-h: 1.2.2 @vue/babel-sugar-v-model: 1.2.3 @vue/babel-sugar-v-on: 1.2.3 @vue/cli-overlay: 4.5.13 @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13 @vue/cli-plugin-router: 4.5.13 @vue/cli-plugin-vuex: 4.5.13 @vue/cli-service: ~4.5.0 => 4.5.13 @vue/cli-shared-utils: 4.5.13 @vue/compiler-core: 3.2.11 @vue/compiler-dom: 3.2.11 @vue/compiler-sfc: ^3.0.0 => 3.2.11 @vue/compiler-ssr: 3.2.11 @vue/component-compiler-utils: 3.2.2 @vue/preload-webpack-plugin: 1.1.2 @vue/reactivity: 3.2.11 @vue/ref-transform: 3.2.11 @vue/runtime-core: 3.2.11 @vue/runtime-dom: 3.2.11 @vue/shared: 3.2.11 @vue/web-component-wrapper: 1.3.0 eslint-plugin-vue: ^7.0.0 => 7.17.0 vue: ^3.0.0 => 3.2.11 vue-eslint-parser: 7.11.0 vue-hot-reload-api: 2.3.4 vue-loader: 15.9.8 (16.5.0) vue-style-loader: 4.1.3 vue-template-es2015-compiler: 1.9.1 npmGlobalPackages: @vue/cli: 4.5.13 ```

Steps to reproduce

vue create my-project (choose default Vue 3)
cd my-project/
cp public/index.html public/index.production.html

add vue.config.js file with following content:

module.exports = {
chainWebpack: (config) => {
config
  .plugin('html')
  .tap((args) => {
    if (process.env.NODE_ENV === 'production') {
      args[0].template = './public/index.production.html';
    }
    return args;
  });
},
};

yarn build

What is expected?

dist folder has correctly bundled index.html only

What is actually happening?

dist folder has correcly bundled index.html and copied index.production.html

This issue may be related to https://github.com/vuejs/vue-cli/issues/3597

screetBloom commented 3 years ago

the public folder will simply be copied, see here: The public Folder

if you want to do something , can 👇


"scripts": {
    "build": "vue-cli-service build && node copy.js"
  },

alinkedd commented 3 years ago

@screetBloom, thanks for the answer. In my case a workaround was smth like following:

  chainWebpack: (config) => {
    config
      .plugin('html')
      .tap((options) => {
        options[0].template = `./public/index.production.html`;
        return options;
      });

    config.plugin('copy').tap(([options]) => {
      options[0].ignore.push('index.production.html');
      return [options];
    });
  },

The thing is if original template named index.html is being ignored and not copied, why copy template with different name that was used for entry generation? :) In case given point is not valid, this issue might be closed.

vuejs / vue-cli