使节点服务器不缓存文件

问题描述

我为第三方建立了一个存储库，以在我们的网站上创建插件。基本上，我的回购基于Markus Oberlehner的指南：https://github.com/maoberlehner/distributed-vue-applications-loading-components-via-http。

我只包括了将vue组件编译成js文件所需的文件和文件夹。我没有包括他的任何专用于在另一个项目中包含这些外部js文件的代码。

用户可以使用以下命令轻松将vue组件编译为js文件。

npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/com
ponents/SendNotification --name "SendNotification" server/components/SendNotification
/SendNotification.vue

并通过执行node server/index.js来提供此组件。

然后在浏览器中可以找到此.js文件：

http：// localhost：8200 / SendNotification / SendNotification.umd.min.js

但是，假设用户要更改其组件并重新编译.js文件，则此更改不会显示在浏览器中。仅当我重新加载浏览器选项卡时，更改才会显示。我认为这意味着该网站正在缓存文件，我们需要禁用此文件。

我已经搜索了有关如何禁用缓存的简单教程和文档，但无法正常工作。

我们的目录结构：

- .git
- package.json
- package-lock.json
- README.md
- node_modules
- server
 -- index.js
 -- components
 --- SendNotification
 ---- SendNotification.vue
 ---- SendNotification.umd.min.js
 ---- SendNotification.umd.min.js.map

package.json内容：

 {
  "name": "precompiling-vue-components","version": "0.1.0","author": "Bob Smith","license": "MIT","private": true,"scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
  },"dependencies": {
    "@vue/cli-plugin-babel": "^3.12.1","@vue/cli-service": "^3.12.1","express": "^4.16.4","node-sass": "^4.11.0","node-sass-magic-importer": "^5.3.2","reset-css": "^4.0.1","sass-loader": "^7.1.0","vue": "^2.6.10","vue-template-compiler": "^2.6.12"
  }
}

index.js内容：

const express = require（express）; const path = require（path）;

const PORT = 8200;

const app = express();

app.use(express.static(path.resolve(__dirname,`components`),{
  maxAge: `365d`,}));

app.listen(PORT);

// eslint-disable-next-line no-console
console.log(`Listening on: http://localhost:${PORT}`);

解决方法

这不是缓存问题。客户端在加载时从服务器加载页面，除非您从加载的页面到服务器进行任何通信，否则客户端对服务器端状态一无所知。

您需要重新加载客户端页面。

这需要类似browser-sync或您自己的socket.io的实现来通知客户端页面已更新。

请记住，客户端与服务器已断开连接，并且不知道服务器上会发生什么，除非用户重新加载页面，客户端代码轮询服务器以查找更改或服务器将更改传达给客户端通过Websocket订阅的形式。

build build build hot-reload