vue-cli: vue-cli-service build does not update or invalidate node_modules/.cache, resulting in broken build

Workaround: npm install rimraf --save-dev

In package.json add the prebuild script:

...
"prebuild": "node ./node_modules/rimraf/bin.js ./node_modules/.cache",
"build": "vue-cli-service build --modern",
..

Kind of clumsy, but better than corrupted build.

“There are two hard problems in programming: naming things, and caching.”

What options do we have?

• We could add package.json’s dependencies, devDependencies and peerDependencies fields as inputs to the chache-key generating code (e.g. here. But that wouldn’t work for updated nested dependencies (i.e. clearing yarn.lock and reinstalling, adding updated dependencies in the process
• We could add a postinstall script that purges the cache whenever anything is installed into the project (is that possible?)
• We could document this, and add a command/flag to easily purge the cache manually (vue-cli-service build --clearCache or something).

Other ideas? @sodatea

FWIW, we have the same problem when updating packages containing custom Vue components, even in development. Old versions are still displayed until we nuke the cache.

Here is the zip with both projects reproduction.zip Note on how I created it:

• vue create a - using default template
• vue create b - using default template
• I deleted .git repo, and node_modules, but left package-lock.json so you can see what has been actually used.

In b:

• removed private flag from package.json and added publishConfig to specify private npm repository
• edited @/src/components/HellowWorld.vue to see its version - added B@0.1.0 after msg
• npm publish

In a:

• npm install b --save
• in app.vue changed import HelloWorld from “b/src/components/HelloWorld.vue”;
• npm run build
• deployed dist to my webserver, index.html shows text: Welcome to Your Vue.js App B@0.1.0

OK so far, now the change:

In b:

• edited @/src/components/HellowWorld.vue to see its version - added B@0.2.0 after msg
• npm version minor
• npm publish

In a:

• edited package.json, updated b’s version pattern to “^0.2.0”
• npm update b (after completion, node_modules/b is in version 0.2.0)
• npm run build
• deployed dist to my webserver, index.html shows text: Welcome to Your Vue.js App B@0.1.0

Not OK, the text should display B@0.2.0. But when I delete cache:

In a:

• delete node_modules/.cache
• npm run build
• deployed dist to my webserver, index.html shows text: Welcome to Your Vue.js App B@0.2.0

Which is expected behavior.