Vue 开发服务器：写入磁盘并从磁盘读取

2025年2月1日

预计阅读：2min

配置步骤

1. 升级 webpack-dev-middleware

在 package.json 中添加 overrides：

{
  "overrides": {
    "webpack-dev-middleware": "^5.3.4"
  }
}

然后安装：

npm install

2. 配置 vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const fs = require('fs')
 
module.exports = defineConfig({
  devServer: {
    devMiddleware: {
      writeToDisk: true,  // 写入磁盘
      // 使用 Node.js fs，从磁盘读取（而不是内存）
      outputFileSystem: {
        ...fs,
        join: path.join.bind(path),
        mkdirp: (dir, callback) => {
          fs.mkdir(dir, { recursive: true }, callback)
        }
      }
    }
  }
})

工作原理

默认：webpack-dev-server 使用内存文件系统，文件只存在于内存
配置后：使用 Node.js fs，文件写入 dist/ 并从磁盘读取

验证

启动服务器后，检查 dist/ 目录应该有生成的文件：

npm run serve
ls dist/js/  # 应该能看到 app.js, chunk-vendors.js 等

注意事项

需要 webpack-dev-middleware 5.3.4+
从磁盘读取比内存稍慢，但通常影响不大
热更新功能仍然正常工作

Edit on GitHub