動(dòng)態(tài)ployfill
以前為解決瀏覽器對部分ES6 API不支持的問題都是通過 在項(xiàng)目中直接導(dǎo)入babel-polyfill刑赶，不管能不能用到，都全量處理毛肋，這樣會(huì)造成一部分的資源浪費(fèi)巍膘。 動(dòng)態(tài)polyfill的 概念就是根據(jù)項(xiàng)目需要指定要 polyfill 的特性峡懈，而且會(huì)根據(jù)瀏覽器是否支持相關(guān)API來動(dòng)態(tài)加載瀏覽器需要引入的 polyfill璃饱，也可以指定強(qiáng)制需要支持的API梅鹦，直接到 polyfill.io 勾選生成即可
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,Reflect"></script>
靜態(tài)資源CDN
const cdn = {
// 忽略打包的第三方庫
externals: {
"vue": 'Vue',
"element-ui": "ELEMENT",
'vue-router': 'VueRouter',
"vuex": 'Vuex',
"axios": 'axios',
},
// 通過cdn方式使用
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js',
'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js',
"https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js",
],
css: ["https://unpkg.com/element-ui@2.15.0/lib/theme-chalk/index.css"],
}
#vue.config.js
chainWebpack: config => {
if (process.env.NODE_ENV == "production") {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
});
}
config.plugins.delete('prefetch');
},
#/public/index.html
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
前端資源開啟gz壓縮
//打包忽略第三方庫
configureWebpack: config => {
// 忽略打包配置
if (process.env.NODE_ENV == "production") {
config.externals = cdn.externals
// 開啟gzip壓縮
config.plugins.push(
new CompressionWebpackPlugin({
test: /\.(js|css)?$/i, // 哪些文件要壓縮
filename: '[path].gz[query]', // 壓縮后的文件名
algorithm: 'gzip', // 使用gzip壓縮
minRatio: 1, // 壓縮率小于1才會(huì)壓縮
deleteOriginalAssets: true // 刪除未壓縮的文件昨凡，謹(jǐn)慎設(shè)置乎莉，如果希望提供非gzip的資源送讲，可不設(shè)置或者設(shè)置為
}
)
)
}
}
圖片懶加載
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
preLoad: 1,
error: require('./assets/img/error.jpg'),
loading: require('./assets/img/homePage_top.jpg'),
attempt: 2
})
<!-- img中使用圖片懶加載。 v-lazy代替v-bind:src -->
<img v-lazy="imgSrc" alt="" >
<!-- 背景圖中使用圖片懶加載惋啃。 v-lazy:background-image = "" -->
<li v-for="(url,index) in imgList" v-lazy:background-image="url"></li>
Nginx開放webSocket連接配置
location /socket.io {
proxy_pass http://serverIP:port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
}
Nginx開啟Gzip哼鬓，處理頁面404
server {
listen 80;
server_name *.我的domain.com;
access_log logs/hr.log;
error_log logs/hr.error.log;
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
index index.html index.htm;
root /home/yxl/find-house/client/find-house-client/dist/;
try_files $uri $uri/ /index.html;
}
location ^~ /api/ { #這里是用正則匹配的以api 開頭的路徑 通過 proxy_pass 屬性代理到服務(wù)器上node項(xiàng)目運(yùn)行地址
proxy_pass http://ServerIP:8001/; #因?yàn)槲襫ode項(xiàng)目和前端項(xiàng)目是部署在同一臺(tái)服務(wù)器上的，所以地址用的是127.0.0.1边灭，如果是$
}
location /assets {
alias /home/yxl/find-house/client/find-house-client/dist/;
gzip_static on;
expires max;
add_header Cache-Control public;
}
error_page 500 502 503 504 /500.html;
client_max_body_size 20M;
keepalive_timeout 10;
}
^~/api/表示匹配前綴是api的請求异希，proxy_pass的結(jié)尾有/， 則會(huì)把/api/*后面的路徑直接拼接到后面绒瘦，即移除api.
普通用戶免密登錄linux服務(wù)器
客戶端要想免密登陸服務(wù)器必須把客戶端的公鑰(pub)文件的內(nèi)容添加到服務(wù)器的authorized_keys文件中称簿。
//客戶端生成公鑰對
yxl@client:~$ ssh-keygen -t rsa -P ''
//將公鑰拷貝到目標(biāo)服務(wù)器指定目錄下
yxl@client:~$ scp .ssh/id_rsa.pub yxl@server_IP:/home/yxl/.ssh/id_rsa.pub
服務(wù)器下將pub文件內(nèi)容追加到authorized_keys文件中
//將公鑰追加到該文件中
richard@richard~$ cat id_rsa.pub >> .ssh/authorized_keys
sudo chmod 700 .ssh && sudo chmod 600 authorized_keys//必須如此權(quán)限，否則免密登陸無效
//客戶端免密登陸服務(wù)器
ssh richard@server_IP
pm2進(jìn)程管理
- 列出所有進(jìn)程/應(yīng)用 pm2 list
- 查看某個(gè)進(jìn)程/應(yīng)用具體情況 pm2 describe www
- 查看進(jìn)程/應(yīng)用的資源消耗情況 pm2 monit
- 查看pm2的日志 pm2 logs
- 查看某個(gè)進(jìn)程/應(yīng)用的日志,使用 pm2 logs www
pm2日志管理
pm2 install pm2-logrotate@2.2.0
語法：pm2 set pm2-logrotate:<param> <value>
pm2 set pm2-logrotate:rotateInterval '* * */1 * *' // 每小時(shí)備份
pm2 set pm2-logrotate:compress true // 壓縮
pm2 set pm2-logrotate:retain 3 // 備份最多3份惰帽，也就是備份最進(jìn)3小時(shí)的日志
pm2-logrotate具體配置說明：
- max_size （默認(rèn)10M）: 當(dāng)一個(gè)文件的大小超過這個(gè)值時(shí)憨降，它將會(huì)對其進(jìn)行旋轉(zhuǎn)。你可以在最后指定單位:10G, 10M, 10K
- retain（默認(rèn)為30個(gè)文件日志）：保留日志文件數(shù)量
- compress（默認(rèn)false）：是否啟用壓縮處理所有的旋轉(zhuǎn)日志
- dateFormat（默認(rèn)格式Y(jié)YYY-MM-DD_HH-mm-ss）：日志文件名稱格式
- rotateModule（默認(rèn)true）：像其他應(yīng)用程序一樣旋轉(zhuǎn)pm2模塊的日志
- workerInterval（默認(rèn)30秒）：檢查日志大小的時(shí)間間隔
- rotateInterval（默認(rèn)每天午夜0 0 * * *）：定時(shí)執(zhí)行旋轉(zhuǎn)
TZ（默認(rèn)系統(tǒng)時(shí)間）：偏移保存日志文件的標(biāo)準(zhǔn)tz數(shù)據(jù)庫時(shí)區(qū)
基本命令
- grep -rin "關(guān)鍵字" ./ 查看當(dāng)前路徑下包含關(guān)鍵字的文件
- scp -r yxl@IP:SERVER_PATH localhost_path 服務(wù)器文件下載到當(dāng)前
- scp -r localhost_file yxl@IP:SERVER_PATH 本地文件上傳服務(wù)器
- find . -name "sql.log.20200*"| xargs rm -f 批量刪除
- head -n 7 /etc/services 顯示文件前7行內(nèi)容
- tail -n 3 /etc/services 顯示文件最后3行內(nèi)容
- sudo chmod (-R遞歸) 777(4讀该酗，2寫授药，1可運(yùn)行)
常用命令
- top 性能分析士嚎，動(dòng)態(tài)顯示內(nèi)存（MEM），CPU占用情況
- free top的精簡版
- df -hl 查看磁盤占用情況
- du -sh 當(dāng)前目錄占用磁盤空間大小悔叽，不包括子目錄和目錄下的文件莱衩，
- netstat 顯示網(wǎng)絡(luò)相關(guān)信息
- -a (all)顯示所有選項(xiàng)，默認(rèn)不顯示LISTEN相關(guān)
- -t (tcp)僅顯示tcp相關(guān)選項(xiàng)
- -u (udp)僅顯示udp相關(guān)選項(xiàng)
- -n 拒絕顯示別名娇澎，能顯示數(shù)字的全部轉(zhuǎn)化成數(shù)字笨蚁。
- -l 僅列出有在 Listen (監(jiān)聽) 的服務(wù)狀態(tài)
- -p 顯示建立相關(guān)鏈接的程序名
- -r 顯示路由信息，路由表
- -e 顯示擴(kuò)展信息九火，例如uid等
- -s 按各個(gè)協(xié)議進(jìn)行統(tǒng)計(jì)
- -c 每隔一個(gè)固定時(shí)間赚窃，執(zhí)行該netstat命令。
- ps -ef |grep -rin '進(jìn)程名' 顯示所有正在運(yùn)行的命令程序
- UID： 說明該程序被誰擁有
- PID：就是指該程序的 ID
- PPID： 就是指該程序父級程序的 ID
- C： 指的是 CPU 使用的百分比
- STIME： 程序的啟動(dòng)時(shí)間
- TTY： 指的是登錄終端
- TIME : 指程序使用掉 CPU 的時(shí)間
- CMD： 下達(dá)的指令
- 端口占用情況也可以使用lsof -i:端口號(hào)查看岔激，前提安裝了lsof
