Clean to remove content of dist folder instead of removing and recreating the dist folder (issues with docker mount on dist folder)

[chrisrueger]

Version

4.5.10

Environment info

Docker   
Environment Info:

  System:
    OS: Linux 4.15 Alpine Linux
    CPU: (2) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.15.3 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @kazupon/vue-i18n-loader: ^0.5.0 => 0.5.0 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.0 
    @vue/babel-plugin-jsx:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.10 
    @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.10 
    @vue/cli-plugin-babel: ^4.5.10 => 4.5.10 
    @vue/cli-plugin-eslint: ^4.5.10 => 4.5.10 
    @vue/cli-plugin-router:  4.5.10 
    @vue/cli-plugin-vuex:  4.5.10 
    @vue/cli-service: ^4.5.10 => 4.5.10 
    @vue/cli-shared-utils:  4.5.10 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    vue: ^2.6.12 => 2.6.12 
    vue-eslint-parser:  7.1.1 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.22.3 => 8.22.3 
    vue-loader:  15.9.6 (16.1.2)
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.6.0 => 3.6.0 
  npmGlobalPackages:
    @vue/cli: 4.5.9

Steps to reproduce

We are running vuecli environment inside a docker container.
We are mounting a host folder to the destination folder (dist) in our docker-compose.

package.json:

"scripts": {
"build-docker": "vue-cli-service build --mode 'development' --watch --dest dist
}

docker-compose.yml:

volumes:
        - ./templates/_generated/frontend-vue/dist/:/app/dist

Now build via:

vue-cli-service build --mode 'development' --watch --dest dist

What is expected?

We expected that all the files and folders inside the "dist" folder are removed. Similar to
cd dist && rm -rf *

What is actually happening?

The dist folder itself is removed, not just its contents.

---

This subtle difference is a problem when you have a docker mount specifically on that dist folder.
Because removing this dist folder from within the container breaks the mount and then the built files are not visible on the host anymore. You need a container restart. This all breaks a smooth development flow in this particular scenario.

Our current workaround is to add a --no-clean and do a rm -rf dist/* initially.
But this does not work with the --watch option, as it is only done once initially.

package.json:
"scripts": {
"build-docker": "rm -rf dist/* && vue-cli-service build --mode 'development' --watch --dest dist --no-clean",
}

[fangbinwei]

Workaround maybe like this

"scripts": {
"build-docker": "vue-cli-service build --mode 'development' --watch --dest dist/output
}

then the 'output' folder will be removed and recreated, you can consume it

[chrisrueger]

@fangbinwei This is a great idea. Works like a charm.
The only thing I noticed is that --watch apparently does not clean on every rebuild. The clean just happens during the first build, so when vue-cli-service build --mode 'development' --watch --dest dist/output is initiated. But a rebuild (which happens on every file change) does not seem to remove the folder / contents. We tested it by placing a dummy file in the output. It was only removed initially.

This basically behaves the same as our workaround with prepending rm -rf dist/* &&

It is no big deal and ok - I was just surprised.

Conclusion:

What do you think should we do with this issue here? Should we just close it , as there is a workaround? Or would it be good to add a similar suggestion to the docs somewhere?
Opinions?

[fangbinwei]

The dist folder itself is removed, not just its contents.

I believe we could enhance the behavior of CLI ( by using fs.emptyDir instead of fs.remove)

vue-cli/packages/@vue/cli-service/lib/commands/build/index.js

Line 196 in 3f82947

await fs.remove(targetDir)

The only thing I noticed is that --watch apparently does not clean on every rebuild

I have no idea now, there is an issue #6182 to track this problem

[tflori]

can we backport this please in 4.5