缓存策略
设置HTML页面不缓存,其他页面缓存(主要是JS),并且打包的时候生成hash,比如:app.4fc510ca.js
这样可以保证每次发布更新后,不需要客户端显示点F5来刷新页面
vue.config.js
const webpack = require("webpack");
let path = require("path");
const version = new Date().getTime();
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
publicPath: './',
assetsDir: 'static',
filenameHashing: true,
configureWebpack: (config) => {
// 只在生产环境添加哈希
if (process.env.NODE_ENV === 'production') {
return {
output: {
filename: '[name].[contenthash:8].js', // JS 文件名
chunkFilename: '[name].[contenthash:8].js' // 异步块文件名
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'chunk-vendors',
enforce: true
}
}
}
}
};
}
},
css: {
loaderOptions: {
sass: {
// 旧版 在 sass-loader v7 中,选项名使用data
data: `@import "~@/assets/scss/commen.scss";`
// 新版sass-loader,选项名使用prepend
// prependData: `@import "~@/assets/css/commen.scss";`
}
}
},
devServer: {
port: 8080,
open: true,
}
}
nginx.conf
server {
listen 443 ssl;
server_name www.test.com;
root /home/wwwroot/www-test-dist/dist;
error_page 404 /404.html;
ssl_certificate cert/crm.pem; # 证书名
ssl_certificate_key cert/crm.key; # 证书密钥
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #使用此加密套件。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #使用该协议进行配置。
ssl_prefer_server_ciphers on;
# 处理根目录和路径请求
location / {
# 入口页面请求 - 设置无缓存
add_header Cache-Control "no-cache, must-revalidate";
# 尝试查找文件,不存在则返回index.html
try_files $uri $uri/ /index.html;
}
# 处理直接请求的HTML文件(如访问 /index.html)
location ~* \.(html|htm)$ {
# 确保HTML文件不缓存
add_header Cache-Control "no-cache";
add_header Pragma "no-cache";
add_header Expires "0";
try_files $uri /index.html;
}
# 处理带查询参数的请求
location ~* \? {
add_header Cache-Control "no-cache";
add_header Pragma "no-cache";
add_header Expires "0";
try_files $uri $uri/ /index.html;
}
# 静态资源(30天缓存)
location ~* \.(?:js|css|png|jpg|jpeg|gif|ico|map|woff|ttf)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000";
}
access_log /home/wwwlogs/www_test_client.log main;
error_log /home/wwwlogs/www_test_error.log error;
}