Skip to content

vue-loader会缓存node_modules中的npm包导致更新npm包后每次启动都是缓存中的版本问题 #3635

Closed
@ziyi2

Description

@ziyi2

Version

3.5.1

Environment info

System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1231 v3 @ 3.40GHz
  Binaries:
    Node: 10.3.0 - E:\node\node.EXE
    Yarn: 1.13.0 - C:\Users\zhuxiankang\AppData\Roaming\npm\yarn.CMD
    npm: 6.1.0 - E:\node\npm.CMD
  Browsers:
    Edge: 25.10586.672.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.5.1 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.5.1 
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.1 
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1 
    @vue/cli-service: ^3.5.0 => 3.5.1 
    @vue/cli-shared-utils:  3.5.1 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.2 
    vue: ^2.6.6 => 2.6.9 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.9 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1、vue create

2、引入@xx-xx/xx@0.2.15版本的包(这个包是一个组件包,引用的是内部的.vue源码,未进行webpack打包)

3、npm run serve(展示0.2.15版本内容)

4、引入更新后的@xx-xx/xx@0.2.16版本的包

5、报错后重新启动npm run serve(展示的仍然是0.2.15版本的内容)

What is expected?

更新后应该显示@xx-xx/xx@0.2.16版本的包的内容

What is actually happening?

展示的仍然是0.2.15版本的内容


1、包的结构很简单,npm的main指向index.js,index.js里注册了一个组件,指向了一个.vue文件,.vue文件里简单的写了一个h标签,包的升级只是更改了h标签的文本内容

2、当我更新@xx-xx/xx@0.2.16版本的包后,我手动进入node_modules的包的.vue文件进行保存操作,热更新成功,说明热更新本身应该是有效的

3、猜测和cache-loader相关,于是我把@vue/cli-service/lib/config/base.js中的vue-loader相关的cache干掉,发现没有缓存问题,得到了预期效果

webpackConfig.module
      .rule('vue')
        .test(/\.vue$/)
        // .use('cache-loader')
        //   .loader('cache-loader')
        //   .options(vueLoaderCacheConfig)
        //   .end()
        .use('vue-loader')
          .loader('vue-loader')
          .options(Object.assign({
            compilerOptions: {
              preserveWhitespace: false
            }
          // }, vueLoaderCacheConfig))
          }))

4、我发现node_modules下有个.cache文件,直接粗暴的删除node_modules中的.cache文件也可以生效,但是使用这个npm包的用户肯定不想每次更新后还需要有这种操作

5、是不是可以通过vue.config.js默认去覆盖vue-loader的配置,去除缓存?这样操作合理么?

6、是不是可以有个noVueLoaderCache的开关?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions