Cordova+Vue.js2+Webpack生产构建缓存问题求助

我之前在类似的Vue+Webpack+Cordova项目里也踩过一模一样的缓存坑，折腾了好一阵才搞定，给你几个针对性的解决方案，应该能帮你解决问题：

1. 先手动清理缓存和旧构建文件 #

Webpack默认会缓存构建过程中的中间文件，有时候这些缓存会“记住”旧的资源路径，导致新修改的内容没被编译进去。你可以先做两步清理：

• 删掉项目根目录下的node_modules/.cache文件夹，这是Webpack的缓存目录
• 删掉旧的dist文件夹，避免残留旧资源
• 嫌手动删麻烦的话，直接在package.json的scripts里加个清理命令，让构建前自动执行：

  "scripts": {
    "clean": "rm -rf node_modules/.cache && rm -rf dist",
    "build": "npm run clean && webpack --mode production"
  }
  

  之后执行npm run build就会先清空缓存和旧产物，再重新构建。

2. 给静态资源加哈希后缀（最推荐的长期方案） #

这是解决生产环境缓存问题的标准操作——让Webpack给每个编译后的资源文件名加上唯一哈希值，新修改的资源会生成新的文件名，浏览器就不会再加载旧缓存了。
打开你的Webpack生产配置文件（一般是build/webpack.prod.conf.js或者根目录的webpack.config.js），修改两处配置：

• output部分：给js文件加contenthash

  output: {
    filename: '[name].[contenthash:8].js', // 8位哈希足够唯一
    chunkFilename: '[id].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist')
  }
  

• 静态资源loader部分：给图片、字体等资源加哈希

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 小于10k转base64，可根据需求调整
          name: 'static/img/[name].[hash:8].[ext]' // 哈希后缀
        }
      },
      // 如果你有字体资源，同样给字体文件名加哈希
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[hash:8].[ext]'
        }
      }
    ]
  }
  

  这里用contenthash而不是普通的hash，因为contenthash只和文件内容绑定，文件内容没变哈希就不变，内容变了哈希才更新，既解决缓存问题，又能保留未修改资源的缓存优势。

3. 彻底禁用Webpack缓存（临时排查用） #

如果你想快速验证是不是Webpack缓存的问题，可以直接在Webpack配置里禁用缓存：

module.exports = {
  // ...其他配置项
  cache: false,
  // ...
}

不过这个不建议长期用，因为会大幅减慢构建速度，适合临时排查问题时用。

4. 检查Cordova WebView的缓存 #

有时候问题不在Webpack，而是Cordova的WebView缓存了旧的dist资源。你可以在config.xml里添加禁用WebView缓存的配置：

<preference name="Cache-Control" value="no-cache, no-store, must-revalidate" />
<preference name="Pragma" value="no-cache" />
<preference name="Expires" value="0" />

这样Cordova的WebView每次都会加载最新的dist文件，不会用本地缓存。

5. 禁用Vue Loader的缓存 #

Vue的vue-loader也可能会缓存编译后的模板，你可以在Webpack配置里关掉它：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          cacheDirectory: false, // 禁用缓存目录
          cacheIdentifier: false // 禁用缓存标识
        }
      }
    ]
  }
}

建议先从第1和第2个方案开始试，这两个是最常见的解决办法，一般就能解决你的问题了。如果还是不行，再依次排查后面的配置。

内容的提问来源于stack exchange，提问作者MattMatt