使节点服务器不缓存文件

Make a node server not cache files

我为第 3 方建立了一个存储库,以在我们的网站上创建插件。本质上,我的回购基于 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}`);

这不是缓存问题。客户端在加载时从服务器加载页面,除非您从加载的页面到服务器有一些通信,否则它对 server-side 状态一无所知。

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

需要类似 browser-sync, or your own socket.io 的实现来通知客户端页面已更新。

请记住,客户端与服务器分离,并且不知道服务器上发生了什么,除非用户重新加载页面,客户端代码轮询服务器以获取更改,或者服务器将更改传达给客户端通过 websocket 进行某种形式的订阅。