vite3+vue3 项目打包优化实战之-视图分析（rollup-plugin-visualizer）、CDN引入、依赖分包、gzip压缩、history404问题

news2025/2/23 13:45:36

文章目录

  • 写在前面
  • build 视图分析依赖文件
  • 第三方库CDN引入
  • 依赖文件分包
  • gzip压缩文件
  • 部署前配置history路由模式的404问题
  • 最后

写在前面

vue项目在线下环境开发完成后，我们就需要项目的打包上线了，除了要知道打包命令npm run build 之外，我们还要知道项目整体文件依赖情况，web访问加载速度等概念，包括首屏优化方案。我通过一次实战把最基本可以优化的步骤走一下。
将分为以下几个步骤:

  1. build 视图分析依赖文件
  2. 第三方库CDN引入
  3. 依赖文件分包
  4. gzip压缩文件
  5. 部署前配置history路由模式的404问题

build 视图分析依赖文件

分析项目中的文件大小及引用情况，是优化前的重要一步,从而去采取文件分包，cdn引入等相关技术概念，那么在vite下我们可以利用什么工具来做项目的依赖分析呢？

答案是:
Rollup Plugin Visualizer,这是一个依赖分析插件，它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式),你可以选择任意一种你喜欢的观察模式，这里我们就以默认的为例；

安装方式如下:
npm install --save-dev rollup-plugin-visualizer
yarn add --dev rollup-plugin-visualizer
❗选择一种安装即可；

安装完成后，即可在vite下的插件属性中进行配置：

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
  plugins: [vue(), visualizer({
    emitFile: false,
    file: "stats.html", //分析图生成的文件名
    open:true //如果存在本地服务端口，将在打包后自动展示
  })],
})

配置的参数有很多是默认的，如果你没有特殊需求，完全可以不添加参数；下面我添加一个表格对已有参数进行诠释：

参数类型解释
filename/filestring生成分析的文件名
titlestringhtml标签页标题
openboolean以默认服务器代理打开文件
templatestring可选择的图表类型
gzipSizeboolean搜集gzip压缩包的大小到图表
BrotliSizeboolearn搜集brotli压缩包的大小到图表
emitFileboolean使用emitFile生成文件，简单说，这个属性为true,打包后的分析文件会出现在打包好的文件包下，否则就会在项目目录下
sourcemapboolean使用sourcemap计算大小
projectRootstring， RegExp文件的根目录，默认在打包好的目录下

看完这些参数，也有了大概的了解，根据需求配置就好
接下来，你只需要npm run build；就可以查看这个图表了
在这里插入图片描述
是不是很好看，五颜六色的，这里颜色也是有说法的：
🟦蓝色表示自己写下的js文件项；
🟩绿色是表示依赖的文件项；
其他颜色我们可以根据文件名来判断
在这里插入图片描述

像上面这个文件，明显我们可以看出这是router相关的文件，当鼠标点击时我们可以看出这块依赖文件的大小，他的位置是是哪里；这里也看到它的大小马上到了100kb，是因为我们的主要业务也确实在这里；那我们就可以通过这样的信息采取一些优化方案，包括不限于修改代码的设计方式等，那么下面要说的CDN引入就是为了减少如element-plus及bootstrap5的打包文件大小，减少本地文件载入压力。下图很直观的可以看出element-plus的占据程度

在这里插入图片描述

第三方库CDN引入

🤔CDN 是构建在数据网络上的一种分布式的内容分发网。 CDN
的作用是采用流媒体服务器集群技术，克服单机系统输出带宽及并发能力不足的缺点，可极大提升系统支持的并发流数目，减少或避免单点失效带来的不良影响。

上面是百度百科的一段话，这里我要cdn引入是因为我们只有一个服务器，便称为单系统；那么引入他们各自官方的cdn链接就是在利用分布式内容分发技术，但是毕竟是人家的cdn安全上还需要考虑，如果自己公司有条件，就可以用自己公司的保证安全性；

话接上文，我们通过视图分析发现了element-plus是最大的文件依赖，包括
bootstrap5,那我们就尝试在vite+vue下配置这俩个库的cdn引入来减少请求压力；

cdn管理插件我们使用vite-plugin-cdn-import
安装方式
npm install vite-plugin-cdn-import --save-dev
yarn add vite-plugin-cdn-import -D
选择自己的包管理器下载

// vite.config.js 基本用法
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN from 'vite-plugin-cdn-import'

export default {
    plugins: [
        importToCDN({
            modules: [
                {
                    name: 'react',
                    var: 'React',
                    path: `umd/react.production.min.js`,
                },
                {
                    name: 'react-dom',
                    var: 'ReactDOM',
                    path: `umd/react-dom.production.min.js`,
                },
            ],
        }),
    ],
}

有一些model该插件还提供了自动完成，不要太爽，我们不需要配置参数了

export default {
    plugins: [
        importToCDN({
            modules: [
                autoComplete('react'),
                autoComplete('react-dom')
            ],
        }),
        reactRefresh(),
    ],
}

写法如上，那么有那些是支持自动完成的呢，官方也写出了

自动完成支持的 module
“react” | “react-dom” | “react-router-dom” |
“antd” | “ahooks” | “@ant-design/charts” |
“vue” | “vue2” | “@vueuse/shared” |
“@vueuse/core” | “moment” |
“eventemitter3” | “file-saver” |
“browser-md5-file” | "xlsx | “crypto-js” |
“axios” | “lodash” | “localforage”

接下来我们再看完参数配置即可完成cdn的相关配置
这里的相关属性配置你们去官方看吧，很明确vite-plugin-cdn-import
然后还需要知道是常见cdn网站,我们主要介绍俩个国外的，也是常用的，

UNPKG：https://unpkg.com
jsDelivr ：https://www.jsdelivr.com

这里还要学习怎么找到对应库cdn包的路径，我们好来配置参数，以UNPKG为例实践如下:
比如我们要配置element-plus的cdn引入,

  1. 先进入https://unpkg.com
  2. 在地址后面链接你的包名
  3. 得到链接配置参数即可

下面我附图来展示：
package.json找到你的包信息

在这里插入图片描述

浏览器拼接你的包并且回车：

在这里插入图片描述

你会发现页面请求到了内容（这就说明该库在cdn上已经存在，我们把整个的链接拿下来配置好参数就可以了）：

在这里插入图片描述

到这里你已经掌握了cdn库自动构建的基本知识，下面看一下我的配置片段:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { autoComplete, Plugin as importToCDN } from 'vite-plugin-cdn-import';

export default defineConfig({
  plugins: [vue(),
   importToCDN({
    prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
    modules: [
      autoComplete('vue'),
      autoComplete('axios'),
      {
        name: 'element-plus',
        var: 'ElementPlus', //根据main.js中定义的来
        version: '2.2.17',
        path: 'dist/index.full.js',
        css: 'dist/index.css'
      },
      {
        name: 'vue-demi',
        var: 'VueDemi', //根据main.js中定义的来
        version: '0.13.11',
        path: 'lib/index.iife.js'
      },
      {
        name: '@element-plus/icons-vue',
        var: 'ElementPlusIconsVue', //根据main.js中定义的来
        version: '2.0.9',
        path: 'dist/index.iife.min.js'
      },
      {
        name: 'bootstrap',
        var: 'bootStrap', //根据main.js中定义的来
        version: '5.2.1',
        path: 'dist/js/bootstrap.js',
        css: 'dist/css/bootstrap.min.css'
      },
    ],
  })
],
)}

上面的配置中有一个问题需要提及，我配置了vue-demi,它是pinia仓库的依赖，简单说，如果不配置它我们的cdn构建中间出现了个缺口，它是pinia-vue中间的一个依赖;vue和axios我配置了自动完成，那接下来看下我们进入实战。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./static/ico/favicon-a91524b8.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xxxxx</title>
    <script type="module" crossorigin src="./static/js/index-3f77d0fe.js"></script>
    <link rel="modulepreload" crossorigin href="./static/js/@vue-57a1150c.js">
    <link rel="modulepreload" crossorigin href="./static/js/js-cookie-1db5286e.js">
    <link rel="modulepreload" crossorigin href="./static/js/axios-08851a62.js">
    <link rel="modulepreload" crossorigin href="./static/js/lodash-es-9a8f223b.js">
    <link rel="modulepreload" crossorigin href="./static/js/@vueuse-d210d573.js">
    <link rel="modulepreload" crossorigin href="./static/js/@element-plus-1fa478d9.js">
    <link rel="modulepreload" crossorigin href="./static/js/@popperjs-892fd7f5.js">
    <link rel="modulepreload" crossorigin href="./static/js/@ctrl-eb0b847c.js">
    <link rel="modulepreload" crossorigin href="./static/js/dayjs-54e8cf14.js">
    <link rel="modulepreload" crossorigin href="./static/js/async-validator-efc2d198.js">
    <link rel="modulepreload" crossorigin href="./static/js/memoize-one-99e54574.js">
    <link rel="modulepreload" crossorigin href="./static/js/escape-html-4bbaf1e1.js">
    <link rel="modulepreload" crossorigin href="./static/js/normalize-wheel-es-da779ce4.js">
    <link rel="modulepreload" crossorigin href="./static/js/@floating-ui-4b8fd220.js">
    <link rel="modulepreload" crossorigin href="./static/js/element-plus-88e408ab.js">
    <link rel="modulepreload" crossorigin href="./static/js/vue-router-5a9da933.js">
    <link rel="modulepreload" crossorigin href="./static/js/vue-demi-5b9a0fa5.js">
    <link rel="modulepreload" crossorigin href="./static/js/pinia-ef1d9feb.js">
    <link rel="modulepreload" crossorigin href="./static/js/@fortawesome-7be7f9bf.js">
    <link rel="stylesheet" href="./static/css/element-plus-c08499e6.css">
    <link rel="stylesheet" href="./static/css/index-f2f66543.css">
    <link rel="stylesheet" href="./static/css/bootstrap-744009a1.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

这样的入口文件，这么多的link是我提前用了分包的效果，下面我们会实战分包；回到上面，这么多的link引入对我们本地的压力可想而知；再来看分析图：

在这里插入图片描述

element-plus的依赖是如此庞大，那我们配置完后，build再来感受下；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="./static/ico/favicon-a91524b8.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>xxxxxxxxx</title>
  <link href="https://unpkg.com/element-plus@2.2.17/dist/index.css" rel="stylesheet">
  <link href="https://unpkg.com/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
  <script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
  <script src="https://unpkg.com/@element-plus/icons-vue@2.0.9/dist/index.iife.min.js"></script>
  <script src="https://unpkg.com/bootstrap@5.2.1/dist/js/bootstrap.js"></script>
  <script type="module" crossorigin src="./static/js/index-8dbc54cb.js"></script>
  <link rel="modulepreload" crossorigin href="./static/js/js-cookie-1db5286e.js">
  <link rel="modulepreload" crossorigin href="./static/js/vue-router-5755d64e.js">
  <link rel="modulepreload" crossorigin href="./static/js/pinia-7992cf6b.js">
  <link rel="modulepreload" crossorigin href="./static/js/@fortawesome-0742f1fb.js">
  <link rel="stylesheet" href="./static/css/index-f2f66543.css">
  <link rel="stylesheet" href="./static/css/element-plus-c08499e6.css">
  <link rel="stylesheet" href="./static/css/bootstrap-744009a1.css">
</head>

<body>
  <div id="app"></div>

</body>

</html>

cdn标签引入正确，我们也可以本地构建serve 来验证效果，这里就不扩展了，那么再看下分析图

在这里插入图片描述

element-plus等第三方库将不会成为我们的本地依赖，这里的tool是我自己的js工具模块，他看起来也是很大，那我们就可以找方法去优化调整，至此你学会了vite框架下的vue项目cdn引入方式；

还有一点题外话，cdn引入之前:

  1. 你需要知道一但依赖网站出现问题，我们的项目也就不行了，所以有依赖如上网站的cdn建议留下备用方案，以便维护。
  2. cdn是对整个库的引入，在你引入前，你要对一个库足够熟悉，比如我有一个好朋友他就在cdn引入中上出现了问题；
    大致是这样：项目是vue3项目，我们知道在vue3中的reactive响应式对象函数，
//它可以这样导入：
import { reactive } from "@vue/reactivity";
//也可以这样：
import { onBeforeMount, ref, reactive } from "vue";

那么如果你用@vue/reactivity来导入，上线后发现reactive响应式没了，别问我怎么知道的，我朋友说的。我们cdn可没有引入该组件的相关依赖，只是在本地\node_modules下才有；

依赖文件分包

🤔在我们没有配置构建工具的分包功能时，构建出来的build将无比巨大且是独立的一个js and css 文件，这样就会存在本地加载文件的压力，已经成熟的方案在rollup 和 webpack中都有概念；

在vite的官方介绍中有这么一段

build.rollupOptions¶
类型： RollupOptions
自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同，并将与 Vite 的内部 Rollup 选项合并。查看 Rollup 选项文档 获取更多细节。

vite底层已经集成了rollup的一部分功能，也就是说我们直接配置好即可；详细关于rollup的配置可以去看官方文档rollupjs;这里我直接给出我的配置情况，也是借鉴部分大佬的文章得出；

export default defineConfig({
  plugins: [vue(), viteCompression({
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: 'gzip',
    ext: '.gz',
  }), 
   importToCDN({
    prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
    modules: [
      autoComplete('vue'),
      autoComplete('axios'),
      {
        name: 'element-plus',
        var: 'ElementPlus', //根据main.js中定义的来
        version: '2.2.17',
        path: 'dist/index.full.js',
        css: 'dist/index.css'
      },
      {
        name: 'vue-demi',
        var: 'VueDemi', //根据main.js中定义的来
        version: '0.13.11',
        path: 'lib/index.iife.js'
      },
      {
        name: '@element-plus/icons-vue',
        var: 'ElementPlusIconsVue', //根据main.js中定义的来
        version: '2.0.9',
        path: 'dist/index.iife.min.js'
      },
      {
        name: 'bootstrap',
        var: 'bootStrap', //根据main.js中定义的来
        version: '5.2.1',
        path: 'dist/js/bootstrap.js',
        css: 'dist/css/bootstrap.min.css'
      },
    ],
  })
],
  build: {
    outDir: 'mh', //输出目录名
    minify: "terser", //压缩方式
    terserOptions: { 
      compress: {
        drop_console: true, //剔除console,和debugger
        drop_debugger: true,
      },
    },
    // chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
    rollupOptions: {
      output: { //静态资源分类打包
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) { //静态资源分拆打包
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
})

配置好你的build.output参数，执行命令npm run build我们就可以看目录结构了


看，已经拆分了一部分，而且在html的头部也进行了分别引入；到这里，你了解了vite文件分包过程；

gzip压缩文件

🤔GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了，效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载.
一般服务器中都安装有这个功能模块的。

了解完gizp的相关概念后，上面的引用也说明了，gzip不只是我们需要在打包的时候生成，也需要在web服务里开启功能，具体开启方式大家自行探索；

在vite下配置gzip

  1. 安装插件vite-plugin-compression；npm i vite-plugin-compression -D
  2. vite入口文件引入
  3. `配置参数
  4. build执行后查看

vite-plugin-compression:使用 gzip 或者 brotli 来压缩资源.

引入方式

import viteCompression from 'vite-plugin-compression';
export default defineConfig({
  plugins: [vue(), viteCompression({
    verbose: true, //是否在控制台输出压缩结果
    disable: false, //是否禁用,相当于开关在这里
    threshold: 10240, //体积大于 threshold 才会被压缩,单位 b，1b=8B, 1B=1024KB  那我们这里相当于 9kb多吧，就会压缩
    algorithm: 'gzip', //压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
    ext: '.gz', //文件后缀
    )}
 ]
)}

上面我尽可能把用到的参数进行了注释，在官方文档中的参数还剩几个，感兴趣的自行研究，目前不涉及。

下面我们再来打包看下文件目录，及终端情况

vite v3.1.2 building for production...
✓ 150 modules transformed.
mh/static/ico/favicon-a91524b8.ico             16.56 KiB
mh/index.html                                  1.58 KiB
mh/static/js/index-8dbc54cb.js                 30.40 KiB / gzip: 11.69 KiB
mh/static/js/js-cookie-1db5286e.js             1.39 KiB / gzip: 0.71 KiB
mh/static/js/@vue-eab67317.js                  6.79 KiB / gzip: 2.78 KiB
mh/static/js/pinia-7992cf6b.js                 4.04 KiB / gzip: 1.85 KiB
mh/static/js/Index-59d563ba.js                 4.04 KiB / gzip: 1.47 KiB
mh/static/js/vue3-slide-verify-b2c33c71.js     6.33 KiB / gzip: 2.54 KiB
mh/static/js/reg-203083cd.js                   1.57 KiB / gzip: 0.69 KiB
mh/static/js/vue-router-5755d64e.js            21.95 KiB / gzip: 8.59 KiB
mh/static/js/Index-117574d0.js                 5.50 KiB / gzip: 2.32 KiB
mh/static/js/formatForm-9f5753eb.js            1.30 KiB / gzip: 0.57 KiB
mh/static/js/Page404-3fd796cd.js               0.52 KiB / gzip: 0.38 KiB
mh/static/js/Project-371261a3.js               10.14 KiB / gzip: 3.75 KiB
mh/static/css/Index-a26bc5b2.css               0.39 KiB / gzip: 0.23 KiB
mh/static/css/vue3-slide-verify-db0b17f7.css   5.44 KiB / gzip: 2.03 KiB
mh/static/css/Index-cca8f32a.css               0.96 KiB / gzip: 0.36 KiB
mh/static/css/Project-962fb2fe.css             1.84 KiB / gzip: 0.60 KiB
mh/static/css/index-f2f66543.css               4.32 KiB / gzip: 1.57 KiB
mh/static/js/crypto-js-734b2e9d.js             53.24 KiB / gzip: 18.24 KiB
mh/static/js/@fortawesome-0742f1fb.js          76.09 KiB / gzip: 21.03 KiB
mh/static/css/bootstrap-744009a1.css           190.34 KiB / gzip: 26.78 KiB
mh/static/css/element-plus-c08499e6.css        313.70 KiB / gzip: 42.47 KiB
mh/static/css/Login-19ba0f1f.css               240.09 KiB / gzip: 181.10 KiB
mh/static/js/Login-89718221.js                 500.40 KiB / gzip: 373.03 KiB

看这个打包效果，已经很受用了，那目录结构如下，把打包好的项目放入服务器目录，服务器开启gzip服务即可应用了；

在这里插入图片描述
项目运行后找到发网络控制台，查看gzip加载;
在这里插入图片描述
有时候控制台默认是没有的，想查看的话要右击该栏->响应表头->content-encoding，这一栏就出现了;

部署前配置history路由模式的404问题

🤔history模式： HTML5 模式，推荐使用这个模式；当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id。漂亮!

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就丑了。

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

上面是vue-router官方文档的一段话，如果你上线是用的history模式那么只要路由不匹配就会产生404；我们在nginx配置关键服务就好，下面是实战配置（大佬给配置的）;

//nginx 配置文件里的 server成员配置，我大概解释一下，配置好启动服务即可
server
    {
        listen 80; //服务端口号
        server_name phpmyadmin;
        index index.html index.htm index.php;
        location /neimenmenhuan {
        proxy_pass http://localhost:8080;  //配置后端接口端口
      }
      location / {
        root  /www/server/phpmyadmin;   //根目录位置
        index index.html index.htm index.php;  //默认入口文件
        try_files $uri $uri /index.html;  //出错重定向 index.html 问题解决于此  
      }
    

      access_log  /www/wwwlogs/access.log;
    }

最后

📚 vite专栏
☃️ 个人简介：一个喜爱技术的人。
🌞 励志格言: 脚踏实地，虚心学习。
❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回关、回访，欢迎进一步交流。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

前端之vue3使用WebSocket

前端之vue3使用WebSocket

vue3使用WebSocketWebSocketWebSocket说明WebSocket图示客户端使用WebSocketvue3中, 客户端使用WebSocket步骤更多方法WebSocket WebSocket说明 WebSocket 是全双工网络通信通信协议&#xff0c;实现了客户端和服务器的平等对话&#xff0c;任何一方都可以主动发送数据。并且…
阅读更多...
Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案

Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案

流文件乱码问题解决方案问题介绍&#xff1a;一、前端方式解决&#xff1a;二、后端方式解决&#xff1a;三、文件预览实现四、点击按钮打开新窗口预览问题介绍&#xff1a; 打开或者预览全是乱码。预览pdf如下图&#xff1a; 解决办法&#xff1a; 1. 后端接口返回的blob文…
阅读更多...
如何在vue中实现文件预览功能

如何在vue中实现文件预览功能

文件流 如何将各种文件的文件流(blob)转化为线上可以直接预览的数据&#xff0c;这里简单介绍四种不同类型的文件预览。分别是pdf&#xff0c;docx&#xff0c;xlsx&#xff0c;jpg/png/jpeg等。有一个事情是需要重点注意的&#xff0c;文件流必须保证能够被正常下载解析后才可…
阅读更多...
前端使用jswebrtc实现视频流播放

前端使用jswebrtc实现视频流播放

JSWebrtc对浏览器的Webrtc做了简单的封装,支持SRS的RTC流的播放. html代码: JSWeb播放器可以通过HTML创建,只需给指定元素添加CSS样式 jswebrtc即可: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta na…
阅读更多...
猿创征文｜我的前端——【HTML5】基础成长学习之路

猿创征文｜我的前端——【HTML5】基础成长学习之路

文章目录 前言 一、网页的基本组成 1.什么是网页 2.什么是HTML 3.网页的形成 二、常用的浏览器 1.常用的浏览器 2.浏览器内核 三、Web标准 1.为什么需要web标准 2.Web标准的构成 前言 在一次机缘巧合之下了解并接触到CSDN&#xff0c;从此开启了我IT学习之路&#x…
阅读更多...
API 低代码开发：接口大师，一套开发、管理和提供接口的产品框架

API 低代码开发：接口大师，一套开发、管理和提供接口的产品框架

目录 一、简介 二、“器”有所用 三、“三大”平台/系统使用手册 ⭐️1、API接口系统手册⭐️ 访问在线接口 在线接口文档列表 接口文档详情页 搜索接口 ⭐️2、Platform开放平台手册⭐️ 访问开放平台 注册并登录开发者账号 创建应用 查看接口权限 调用开发接口 获…
阅读更多...
uniCloud使用

uniCloud使用

uni-app 是是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;微信/支付宝/百度/头条/QQ/钉钉/淘宝&#xff09;、快应用等多个平台。 1 创建uni-app项…
阅读更多...
前端获取mac地址

前端获取mac地址

1.通过getMac库获取mac地址 通过getMac库来获取&#xff1a;getmac - npmGet the MAC address of the current machine you are on.. Latest version: 5.20.0, last published: a year ago. Start using getmac in your project by running npm i getmac. There are 201 other…
阅读更多...
CSS 如何实现文字渐变色 ？

CSS 如何实现文字渐变色 ？

CSS 实现文字渐变色 CSS 实现文字渐变&#xff0c;有两种方法&#xff1a; 1. background 属性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><style>.text-gradient {background-image: linear-gradien…
阅读更多...
【微信小程序】WXSS和全局、页面配置

【微信小程序】WXSS和全局、页面配置

&#x1f352;观众老爷们好呀&#xff0c;小程序系列更新&#xff0c;上文我们讲解了小程序中WXML 中的条件渲染和列表渲染&#xff0c;那么接下来&#xff0c;就让我们走进微信小程序的WXSS以及小程序配置吧&#xff01; &#x1f352;今天的内容也是非常重要&#xff0c;赶紧…
阅读更多...
8种css居中实现的详细实现方式了

8种css居中实现的详细实现方式了

这是一篇关于居中对齐方式的总结 开篇之前&#xff0c;先问一下大家都知道几种居中的实现方式&#xff1f; 面试时答出来两三个就不错了&#xff0c;就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。使用flex 时也能通过给子项设置margin: au…
阅读更多...
VUE-CLI/VUE-ROUTER

VUE-CLI/VUE-ROUTER

个人简介 > &#x1f4e6;个人主页&#xff1a;是Lay的主页 > &#x1f3c6;学习方向&#xff1a;JAVA后端开发 > &#x1f4e3;种一棵树最好的时间是十年前&#xff0c;其次是现在&#xff01; > ⏰往期文章&#xff1a;【Java基础】面向对象进阶(二) > &…
阅读更多...
前端向后端传值的几种方式总结

前端向后端传值的几种方式总结

一、HTML的标签form表单提交&#xff08;常用&#xff09; from表单把所有属于表单中的内容提交给后台&#xff0c;例如输入框&#xff0c;单选框&#xff0c;多选框&#xff0c;文本域&#xff0c;文件域等。 在后台可通过对应的name属性获取相应的值。from表单中的action属性…
阅读更多...
vue踩坑--background-image路径问题

vue踩坑--background-image路径问题

在前端开发中&#xff0c;background-image属性非常常见&#xff0c;有很多时候需要使用内联样式来绑定此属性&#xff0c;但是在vue项目中&#xff0c;如果如下面代码填写路径会找不到图片 项目中图片都放在src/img文件夹&#xff0c;img和background-image引用都用相对路径&a…
阅读更多...
农业病虫害数据集与算法——调研整理

农业病虫害数据集与算法——调研整理

整理自博客 农业病虫害研究图库 陈雷&#xff1b;袁媛.农业病虫害研究图库.(V1).中国科学院合肥物质科学研究院[创建机构],2021-10-27.国家基础学科公共科学数据中心[发布机构],CSTR:16666.11.nbsdc.feoakuia;http://resolve.pid21.cn/CSTR:16666.11.nbsdc.feoakuia 下载链接&…
阅读更多...
火狐浏览器谷歌浏览器Edge浏览器修改默认UA（User-Agent）

火狐浏览器谷歌浏览器Edge浏览器修改默认UA（User-Agent）

1.火狐浏览器&#xff08;Firefox) 1.1 使用浏览器设置进行修改 1&#xff09;在火狐浏览器地址栏输入“about:config”&#xff0c;按下回车进入设置菜单 2&#xff09;输入并找到“general.useragent.override”&#xff0c;选择”字符串“选项&#xff0c;再点击右侧的➕…
阅读更多...
Openlayers 快速上手教程

Openlayers 快速上手教程

&#x1f4e2;欢迎点赞&#x1f44d;/ 收藏⭐/ 留言&#x1f4dd;如有错误敬请指正&#xff01; 1. Openlayers简介 Openlayers 是开源的前端地图框架&#xff0c;官网地址&#xff1a;https://openlayers.org/ 它的作用主要是用于展现数据并且提供相应的地图操作工具。 1.1 …
阅读更多...
SpringCloud 分布式微服务架构

SpringCloud 分布式微服务架构

SpringCloud 分布式架构前言SpringCloud微服务单体架构和微服务分布式架构单体架构分析微服务分布式架构分析服务拆分和远程调用服务拆分 案例需求准备远程调用初步Eureka注册中心服务注册与负载均衡服务注册Ribbon负载均衡指定负载均衡规则Nocas 注册中心环境配置启动服务注册…
阅读更多...
vue3+动态路由

vue3+动态路由

动态路由&#xff0c;也就是不是写死的路由&#xff0c;根据自己的需求加载不同的页面&#xff1b;现在很多的后台管理项目就是根据用户角色的不同分配不同的功能菜单&#xff08;页面&#xff09;&#xff1b; 根据用户登录的角色返回可以访问的页面路由&#xff0c;前端将路由…
阅读更多...
JSON parse error: Cannot deserialize value of type `java.util.Date` from String

JSON parse error: Cannot deserialize value of type `java.util.Date` from String

DateTimePicker DateTimeFormat("yyyy-MM-dd HH:mm:ss")日期格式转换异常 最近在学习,练习一个项目使用的日期格式是yyyy-MM-dd HH:mm:ss格式的,在后端Java与MySQL这边的转换中一开始格式没有统一间歇性的就会报异常,后面采用了一个DateTimeFormat("yyyy-MM-d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023