使节点服务器不缓存文件
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 进行某种形式的订阅。
我为第 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 进行某种形式的订阅。