vue2打包优化-小白也可快速上手的一套

 需求：项目过大可以使用打包优化，减少项目体积，加速页面加载，增强用户体验，跟着步骤来即可实现，主要是vue2的打包优化，不是vue3，文章可能有点长，但是很实用哈哈，耐心看完~

1.打包前体积

运行如下命令开始打包，注意！！！打包之前必须保证项目有node_modules依赖包，不然提示命令无效，npm run build后默认的环境为production

npm run build

优化前打包体积 2.14M

2.下载打包体积可视化工具

npm i webpack-bundle-analyzer

再vue.config.js文件中配置，如果没有这个文件，自己在主目录新建个就行，配置如下：

// 导入包分析器插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ENV = process.env.NODE_ENV
module.exports = {configureWebpack: config => {// 如果是在线上环境if (ENV === 'production') {config.plugins.push(// 解决端口被占用的问题new BundleAnalyzerPlugin({analyzerMode: 'server',analyzerHost: '127.0.0.1',//ip地址analyzerPort: 8880,//设置个未使用的端口就行，默认端口为8888reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,generateStatsFile: false,statsFilename: 'stats.json',statsOptions: null,logLevel: 'info'}),)}}
}

配置完成后删除dist文件再重新打包，会自动弹出网页，这里我们可以看到打包后的体积为2.43MB

3.使用Gzip压缩js和css

安装插件,注意！！！一定不要安装最新版，直接安装6.1.1的版本就行

npm i compression-webpack-plugin@6.1.1

安装最新版会报如下错误

再vue.config.js中添加

// 导入包分析器插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 导入gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const ENV = process.env.NODE_ENV
module.exports = {configureWebpack: config => {// 如果是在线上环境if (ENV === 'production') {config.plugins.push(// 解决端口被占用的问题new BundleAnalyzerPlugin({analyzerMode: 'server',analyzerHost: '127.0.0.1',//ip地址analyzerPort: 8880,//设置个未使用的端口就行，默认端口为8888reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,generateStatsFile: false,statsFilename: 'stats.json',statsOptions: null,logLevel: 'info'}),// gzip，压缩jsnew CompressionWebpackPlugin({filename: '[path].gz[query]',//压缩文件的输入路径和名称algorithm: "gzip",//表示使用gzip算法进行压缩test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),//正则匹配文件名threshold: 10240,//文件大小阀值，大于或者等于10240字节(10kb)minRatio: 0.8,//最小压缩比例，只有压缩后大小与原始大小的比例大于等于该值时，才会保留压缩后的文件。这里设置为 0.8，表示压缩后的文件大小至少为原始文件大小的 80%。deleteOriginalAssets: false,//保留原始文件}))}}
}

 4.添加基础配置和删除需要预先加载和预先获取的资源

主要代码:

    chainWebpack: (config) => {// 删除需要预先加载(当前页面)的资源，当需要这些资源的时候，页面会自动加载config.plugins.delete('preload')// 删除需要预先获取(将来的页面)的资源config.plugins.delete('prefetch')}
// 导入包分析器插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 导入gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const ENV = process.env.NODE_ENV
module.exports = {outputDir: 'dist',// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录assetsDir: 'static',// lintOnSave: process.env.NODE_ENV === 'development',lintOnSave: false,//关闭eslint检查// 不输出 map 文件,false将提高构建速度productionSourceMap: false,configureWebpack: config => {// 如果是在线上环境if (ENV === 'production') {config.plugins.push(// 解决端口被占用的问题new BundleAnalyzerPlugin({analyzerMode: 'server',analyzerHost: '127.0.0.1',//ip地址analyzerPort: 8880,//设置个未使用的端口就行，默认端口为8888reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,//浏览器自动打开generateStatsFile: false,statsFilename: 'stats.json',statsOptions: null,logLevel: 'info'}),// gzip，压缩jsnew CompressionWebpackPlugin({filename: '[path].gz[query]',//压缩文件的输入路径和名称algorithm: "gzip",//表示使用gzip算法进行压缩test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),//正则匹配文件名threshold: 10240,//文件大小阀值，大于或者等于10240字节(10kb)minRatio: 0.8,//最小压缩比例，只有压缩后大小与原始大小的比例大于等于该值时，才会保留压缩后的文件。这里设置为 0.8，表示压缩后的文件大小至少为原始文件大小的 80%。deleteOriginalAssets: false,//保留原始文件}))}},chainWebpack: (config) => {// 删除需要预先加载(当前页面)的资源，当需要这些资源的时候，页面会自动加载config.plugins.delete('preload')// 删除需要预先获取(将来的页面)的资源config.plugins.delete('prefetch')}
}

原先文件目录结构==============修改基础配置后的打包文件结构

5.使用webpack合并js，并且可以对代码进行优化压缩

主要代码

`vue.config.js: `const webpack = require('webpack')
const ENV = process.env.NODE_ENVmodule.exports = {chainWebpack: (config) => {config.when(ENV === 'production', config => {config.plugin('webpackOptimize').use(webpack.optimize.LimitChunkCountPlugin, // 限制生成的代码块(chunks)的数量[{ maxChunks: 10 }]).use(webpack.optimize.MinChunkSizePlugin, // 指定代码块的最小字节数[{ minChunkSize: 50000 }])})}
}

完整代码

const webpack = require('webpack')
// 导入包分析器插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 导入gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const ENV = process.env.NODE_ENV
module.exports = {outputDir: 'dist',// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录assetsDir: 'static',// lintOnSave: process.env.NODE_ENV === 'development',lintOnSave: false,//关闭eslint检查// 不输出 map 文件,false将提高构建速度productionSourceMap: false,configureWebpack: config => {// 如果是在线上环境if (ENV === 'production') {config.plugins.push(// 解决端口被占用的问题new BundleAnalyzerPlugin({analyzerMode: 'server',analyzerHost: '127.0.0.1',//ip地址analyzerPort: 8880,//设置个未使用的端口就行，默认端口为8888reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,//浏览器自动打开generateStatsFile: false,statsFilename: 'stats.json',statsOptions: null,logLevel: 'info'}),// gzip，压缩jsnew CompressionWebpackPlugin({filename: '[path].gz[query]',//压缩文件的输入路径和名称algorithm: "gzip",//表示使用gzip算法进行压缩test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),//正则匹配文件名threshold: 10240,//文件大小阀值，大于或者等于10240字节(10kb)minRatio: 0.8,//最小压缩比例，只有压缩后大小与原始大小的比例大于等于该值时，才会保留压缩后的文件。这里设置为 0.8，表示压缩后的文件大小至少为原始文件大小的 80%。deleteOriginalAssets: false,//保留原始文件}))}},chainWebpack: (config) => {// 删除需要预先加载(当前页面)的资源，当需要这些资源的时候，页面会自动加载config.plugins.delete('preload')// 删除需要预先获取(将来的页面)的资源config.plugins.delete('prefetch')config.when(ENV === 'production', config => {config.plugin('webpackOptimize').use(webpack.optimize.LimitChunkCountPlugin,// 限制生成的代码块(chunks)的数量[{ maxChunks: 10 }]).use(webpack.optimize.MinChunkSizePlugin,// 指定代码块的最小字节数[{ minChunkSize: 50000 }])})}
}

大小查看，减小了一点点哈哈

6.使用cdn加速，可以把一些大包在线上使用cdn加速的方式实现

6.1在主目录建立dependencies-cdn.js

6.2添加需要cdn的加速插件

在这里我用的是BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务有需要的直接去里面搜之后把你自己下载好的插件版本对应上就行，比如我在项目的vuex:3.6.2,那么我去里面找对应版本之后把min.js文件复制进去就行，css是这个插件需要俩个一起导入才行，比如element有一个样式和一个功能。

// cnd加速module.exports = [{ name: 'vue', library: 'Vue', js: 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js', css: '' },{ name: 'vue-router', library: 'VueRouter', js: 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js', css: '' },{ name: 'vuex', library: 'Vuex', js: 'https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js', css: '' },{ name: 'axios', library: 'axios', js: 'https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js', css: '' },{ name: 'element-ui', library: 'ELEMENT', js: 'https://unpkg.com/element-ui/lib/index.js', css: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' },
]

6.3在vue.config.js中导入

主要代码：

const cdnDependencies = require('./dependencies-cdn')
// 设置不参与构建的库
let externals = {}
cdnDependencies.forEach(package => { externals[package.name] = package.library })
// 引入文件的 cdn 链接
const cdn = {css: cdnDependencies.map(e => e.css).filter(e => e),js: cdnDependencies.map(e => e.js).filter(e => e)
}
module.exports = {configureWebpack: config => {// 如果是在线上环境if (ENV === 'production') {config.externals = externals}},chainWebpack: (config) => {/*** 添加 CDN 参数到 htmlWebpackPlugin 配置中*/config.plugin('html').tap(args => {if (process.env.NODE_ENV === 'production') {args[0].cdn = cdn} else {args[0].cdn = []}return args})}
}
}

完整代码

const webpack = require('webpack')
// 导入包分析器插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 导入gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 导入cdn
const cdnDependencies = require('./dependencies-cdn')
// 设置不参与构建的库
let externals = {}
cdnDependencies.forEach(package => { externals[package.name] = package.library })
// 引入文件的 cdn 链接
const cdn = {css: cdnDependencies.map(e => e.css).filter(e => e),js: cdnDependencies.map(e => e.js).filter(e => e)
}const ENV = process.env.NODE_ENV
module.exports = {// 例如 https://www.ciqin.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ciqin.vip/admin/，则设置 baseUrl 为 /admin/。publicPath: process.env.NODE_ENV === "production" ? "/" : "/",outputDir: 'dist',// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录assetsDir: 'static',// lintOnSave: process.env.NODE_ENV === 'development',lintOnSave: false,//关闭eslint检查// 不输出 map 文件,false将提高构建速度productionSourceMap: false,configureWebpack: config => {// 如果是在线上环境if (ENV === 'production') {config.externals = externalsconfig.plugins.push(// 解决端口被占用的问题new BundleAnalyzerPlugin({analyzerMode: 'server',analyzerHost: '127.0.0.1',//ip地址analyzerPort: 8880,//设置个未使用的端口就行，默认端口为8888reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,//浏览器自动打开generateStatsFile: false,statsFilename: 'stats.json',statsOptions: null,logLevel: 'info'}),// gzip，压缩jsnew CompressionWebpackPlugin({filename: '[path].gz[query]',//压缩文件的输入路径和名称algorithm: "gzip",//表示使用gzip算法进行压缩test: /\.(js|css|html)?$/i,//正则匹配文件名threshold: 10240,//文件大小阀值，大于或者等于10240字节(10kb)minRatio: 0.8,//最小压缩比例，只有压缩后大小与原始大小的比例大于等于该值时，才会保留压缩后的文件。这里设置为 0.8，表示压缩后的文件大小至少为原始文件大小的 80%。deleteOriginalAssets: false,//保留原始文件cache: false// 不启用文件缓存}))}},chainWebpack: (config) => {// 删除需要预先加载(当前页面)的资源，当需要这些资源的时候，页面会自动加载config.plugins.delete('preload')// 删除需要预先获取(将来的页面)的资源config.plugins.delete('prefetch')config.when(ENV === 'production', config => {config.plugin('webpackOptimize').use(webpack.optimize.LimitChunkCountPlugin,// 限制生成的代码块(chunks)的数量[{ maxChunks: 10 }]).use(webpack.optimize.MinChunkSizePlugin,// 指定代码块的最小字节数[{ minChunkSize: 50000 }])})/*** 添加 CDN 参数到 htmlWebpackPlugin 配置中*/config.plugin('html').tap(args => {if (process.env.NODE_ENV === 'production') {args[0].cdn = cdn} else {args[0].cdn = []}return args})}
}

6.4在public下的index.html中设置

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><!-- 使用 CDN 加速的 CSS 文件，配置在 vue.config.js 下 --><% for (var i inhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %><linkhref="<%= htmlWebpackPlugin.options.cdn.css[i] %>"rel="preload"as="style"/><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /><% } %><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't workproperly without JavaScript enabled. Please enable it tocontinue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><!-- 使用 CDN 加速的 JS 文件，配置在 vue.config.js 下 --><% for (var i in htmlWebpackPlugin.options.cdn &&htmlWebpackPlugin.options.cdn.js) { %><script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %></body>
</html>

6.4打包后体积1.51MB，减小了快一半了，当然你写的cdn越多减的体积也越多

 7.使用happypack提高打包速度

7.1下载happypack

npm install happypack -D

7.2再vue.config.js中导入

主要代码

// 导入多线程
const HappyPack = require('happypack');
const os = require('os');
// 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });new HappyPack({id: 'happybabel',loaders: ['babel-loader'],threadPool: happyThreadPool}))

完整代码

const webpack = require('webpack')
// 导入包分析器插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 导入gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 导入cdn
const cdnDependencies = require('./dependencies-cdn')
// 导入多线程
const HappyPack = require('happypack');
const os = require('os');
// 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
// 设置不参与构建的库
let externals = {}
cdnDependencies.forEach(package => { externals[package.name] = package.library })
// 引入文件的 cdn 链接
const cdn = {css: cdnDependencies.map(e => e.css).filter(e => e),js: cdnDependencies.map(e => e.js).filter(e => e)
}const ENV = process.env.NODE_ENV
module.exports = {// 例如 https://www.ciqin.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ciqin.vip/admin/，则设置 baseUrl 为 /admin/。publicPath: process.env.NODE_ENV === "production" ? "/" : "/",outputDir: 'dist',// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录assetsDir: 'static',// lintOnSave: process.env.NODE_ENV === 'development',lintOnSave: false,//关闭eslint检查// 不输出 map 文件,false将提高构建速度productionSourceMap: false,configureWebpack: config => {// 如果是在线上环境if (ENV === 'production') {config.externals = externalsconfig.plugins.push(// 解决端口被占用的问题new BundleAnalyzerPlugin({analyzerMode: 'server',analyzerHost: '127.0.0.1',//ip地址analyzerPort: 8880,//设置个未使用的端口就行，默认端口为8888reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,//浏览器自动打开generateStatsFile: false,statsFilename: 'stats.json',statsOptions: null,logLevel: 'info'}),// gzip，压缩jsnew CompressionWebpackPlugin({filename: '[path].gz[query]',//压缩文件的输入路径和名称algorithm: "gzip",//表示使用gzip算法进行压缩test: /\.(js|css|html)?$/i,//正则匹配文件名threshold: 10240,//文件大小阀值，大于或者等于10240字节(10kb)minRatio: 0.8,//最小压缩比例，只有压缩后大小与原始大小的比例大于等于该值时，才会保留压缩后的文件。这里设置为 0.8，表示压缩后的文件大小至少为原始文件大小的 80%。deleteOriginalAssets: false,//保留原始文件cache: false// 不启用文件缓存}),new HappyPack({id: 'happybabel',loaders: ['babel-loader'],threadPool: happyThreadPool}))}},chainWebpack: (config) => {// 删除需要预先加载(当前页面)的资源，当需要这些资源的时候，页面会自动加载config.plugins.delete('preload')// 删除需要预先获取(将来的页面)的资源config.plugins.delete('prefetch')config.when(ENV === 'production', config => {config.plugin('webpackOptimize').use(webpack.optimize.LimitChunkCountPlugin,// 限制生成的代码块(chunks)的数量[{ maxChunks: 10 }]).use(webpack.optimize.MinChunkSizePlugin,// 指定代码块的最小字节数[{ minChunkSize: 50000 }])})/*** 添加 CDN 参数到 htmlWebpackPlugin 配置中*/config.plugin('html').tap(args => {if (process.env.NODE_ENV === 'production') {args[0].cdn = cdn} else {args[0].cdn = []}return args})}
}

文章到此结束，希望对你有所帮助~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/140355.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java实现业务异步的几种方案

Java实现业务异步的几种方案

背景&#xff1a; 在java中异步线程很重要&#xff0c;比如在业务流处理时&#xff0c;需要通知硬件设备&#xff0c;发短信通知用户&#xff0c;或者需要上传一些图片资源到其他服务器这种耗时的操作&#xff0c;在主线程里处理会阻塞整理流程&#xff0c;而且我们也不需要等…
阅读更多...
修改ruoyi框架前端刷新页面时紫色的背景颜色

修改ruoyi框架前端刷新页面时紫色的背景颜色

问题描述 最近在使用ruoyi的前后端分离框架&#xff0c;发现前端VUE页面刷新的时候&#xff0c;会出现加载的紫色页面&#xff0c;想要修改这个颜色&#xff0c;请看下面的教程。 修改教程 找到public/index.html&#xff0c;然后找到background为#7171C6这个颜色的代码&…
阅读更多...
DDoS攻击与CC攻击：网络安全的两大挑战

DDoS攻击与CC攻击：网络安全的两大挑战

在今天的数字时代&#xff0c;网络安全问题越来越突出&#xff0c;其中分布式拒绝服务攻击&#xff08;DDoS攻击&#xff09;和HTTP洪泛攻击&#xff08;CC攻击&#xff09;是两种常见的网络威胁。本文将探讨这两种攻击的概念、原理以及如何有效地应对它们。 1. DDoS攻击&…
阅读更多...
​ModbusTCP转Profibus-DP从站网关把modbus的数据传到300plc上的应用方法​​

​ModbusTCP转Profibus-DP从站网关把modbus的数据传到300plc上的应用方法​​

远创智控YC-DPS-TCP&#xff0c;让Profibus和ModbusTcp总线之间的通讯协议转换更简单。 远创智控YC-DPS-TCP 是一种将Profibus和ModbusTcp总线连接的通讯协议转换设备。这个设备非常符合ModbusTcp协议的设备&#xff0c;比如各种仪表、传感器、交换机等&#xff0c;它们可以通过…
阅读更多...
17.SpringBoot前后端分离项目之简要配置二

17.SpringBoot前后端分离项目之简要配置二

如何配置前端请求和后端响应&#xff08;2&#xff09; 登录接口 前端&#xff1a; 后端控制器&#xff1a; 在My3Controller RequestMapping("/login") public ResponseBody RestObject login(RequestBody UserUI userUI){System.out.println("login方法&…
阅读更多...
饲料化肥经营商城小程序的作用是什么

饲料化肥经营商城小程序的作用是什么

我国农牧业规模非常高&#xff0c;各种农作物和养殖物种类多&#xff0c;市场呈现大好趋势&#xff0c;随着近些年科学生产养殖逐渐深入到底层&#xff0c;专业的肥料及饲料是不少从业者需要的&#xff0c;无论城市还是农村都有不少经销店。 但在实际经营中&#xff0c;经营商…
阅读更多...
《向量数据库指南》——AutoGPT 宣布不再使用向量数据库

《向量数据库指南》——AutoGPT 宣布不再使用向量数据库

生成式 AI 促进了向量数据库的火爆，但如今的技术风向变化似乎也挺快。作为全球最著名的 AI 项目之一，AutoGPT 宣布不再使用向量数据库，这一决定可能让不少人感到惊讶。毕竟从一开始，向量数据库就一直协助管理着 AI 智能体的长期记忆。 那么这个基本设计思路怎么就变了？又…
阅读更多...
C语言，打印指定大小的X

C语言，打印指定大小的X

要打印一个X&#xff0c;无非是在一个二维数组一个矩形中操作&#xff0c;将不是X的部分赋值为空格字符&#xff0c;将是X部分打印为*字符。 矩形的边长就是输入的n&#xff0c;由于矩形的边长是不固定的&#xff0c;所以要找到应该被赋值为*的坐标之间有什么数学关系。 以矩…
阅读更多...
Matlab/C++源码实现RGB通道与HSV通道的转换（效果对比Halcon）

Matlab/C++源码实现RGB通道与HSV通道的转换（效果对比Halcon）

HSV通道的含义 HSV通道是指图像处理中的一种颜色模型&#xff0c;它由色调&#xff08;Hue&#xff09;、饱和度&#xff08;Saturation&#xff09;和明度&#xff08;Value&#xff09;三个通道组成。色调表示颜色的种类&#xff0c;饱和度表示颜色的纯度或鲜艳程度&#xf…
阅读更多...
maven构建jar包运行后出现中文乱码问题解决

maven构建jar包运行后出现中文乱码问题解决

问题描述&#xff1a; 最近在接手一个坑时&#xff0c;发现本地打出来的jar包&#xff0c;到环境中运行之后总是出现中文乱码问题&#xff0c;但又不是全部中文乱码。经过排查发现&#xff0c;只有写在代码里的中文返回到前端之后出现了乱码。再通过解压打出来的jar包&#xff…
阅读更多...
智能井盖是什么？万宾科技智能井盖传感器有什么特点

智能井盖是什么？万宾科技智能井盖传感器有什么特点

智能井盖是一种基于物联网和人工智能技术的新型城市设施。它不仅具备传统井盖的功能&#xff0c;还能通过数字化、自动化的方式实现远程监控和智能管理&#xff0c;提升城市运行效率和服务水平。 WITBEE万宾智能井盖传感器EN100-C2是一款井盖异动监测的传感终端。对窨井盖状态(…
阅读更多...
Linux常用命令——colrm命令

Linux常用命令——colrm命令

在线Linux命令查询工具 colrm 删除文件中的指定列 补充说明 colrm命令用于删除文件中的指定列。colrm命令从标准输入设备读取书记&#xff0c;转而输出到标准输出设备。如果不加任何参数&#xff0c;则colrm命令不会过滤任何一行。 语法 colrm(参数)参数 起始列号&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023