vite+vue3 按需引入Element-plus Vant 以及配置前后端GZiP打包

1.element 2.0 最新版本按需自動引入

1.1注意：由於安裝官網的方法用插件按需自動引入的時候，css會報錯

無法找到當前的引入組件的scss樣式。后來百度，將element-plus的版本降低成1.多的時候運行正常，但是新的問題出現了，在對項目打包的時候，會發現element.js文件的體積非常大，有可能將所有的組件都打包了，這樣就失去了element-plus自動按需引入的意義了。於是在網上找到了一種方法

首先下載 兩個插件

npm i unplugin-vue-components unplugin-element-plus -D

之后在vite.config.js文件中配置

// element-plus 的最新版按需引入
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ElementPlus({
      importStyle: 'sass',
      useSource: true
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

這樣就不用再main.js中導入任何關於element-plus的組件和樣式了，可以在頁面組件中直接使用

<el-progress :percentage="50">
      <el-button type="text">Content</el-button>
</el-progress>

注意：不包括非標簽的元素，例如使用ElMessage，需要先引入否則會把樣式丟失

import {ElMessage } from 'element-plus'

ElMessage({
  message: '登錄成功',
  type: 'success',
})

疑惑未解決的問題：

在未使用按需加載的element-plus時候 在配置文件中全局引入scss文件沒有問題，按需引入后出現了問題，在頁面中無法讀取變量

未引入之前正常的寫法

export default defineConfig({
    css: {
        preprocessorOptions: { 
               scss: {
              additionalData: @import "./src/var.scss"
               }
         }
     },
})

后來修改了配置

export default defineConfig({
    css: {
        preprocessorOptions: { 
        scss: {
             additionalData: `@use "./src/var.scss" as *;`
        }
     }
    },
})

雖然頁面不報這個錯了，但是在頁面中直接引用var.scss中的變量時報無效的變量；

暫時解決： 后來我就直接在需要的頁面中導入的了scss這樣的方法暫時解決。具體的原因不清楚為什么。有知道的小伙伴可以留言交流。

2.vant 的按需引入比較簡單

1.只需要安裝vite-plugin-style-import 插件

npm i vite-plugin-style-import -D

2.之后在vite.config.js文件中配置

//vant 的按需引入
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default defineConfig({
  plugins: [
     styleImport({
       resolves: [VantResolve()],
     }),
  ]
})

3.在vite下還需要在main.js中注冊才能在頁面中使用

import { Button } from 'vant';
const app = createApp(App);
app.use(Button);
export default app

4.之后在使用中需要引入注冊一下

import { Button } from 'vant';

Button type="warning">vant button</Button>

 

3.啟用Gzip壓縮

首先下載插件 vite-plugin-compression

npm i vite-plugin-compression -D

之后在vite.config.js文件中配置

//引入gzip 壓縮
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
})

開啟之后再次打包就會發現體積變小了；注意還需要在服務器上設置gzip，否則不會請求

gzip on;
gzip_vary on;
gzip_proxied any;
 gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types image/svg+xml text/plain text/html text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;

在配置文件中配置 （是在寶塔中設置）

 

 可以在頁面中檢查請求連接是否是gzip

便是成功了。

還有一些其他的簡單配置，下面是全部的配置文件內容，有不足的地方還請多交流

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// element-plus 的最新版按需引入
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//引入gzip 壓縮
import viteCompression from 'vite-plugin-compression'
//vant 的按需引入
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default defineConfig({
  plugins: [
    vue(),
    ElementPlus({
      importStyle: 'sass',
      useSource: true
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    styleImport({
      resolves: [VantResolve()],
    }),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    
  ],
  // 全局css   //按需引入element-plus之后 全局的scss不生效,不知道為什么
  // css: {
  //   preprocessorOptions: { 
  //     scss: {
  //       additionalData: `@use "./src/var.scss" as *;`
  //     }
  //   }
  // },
  base: './',
  //靜態資源服務的文件夾，默認public
  publicDir: 'public',
  // 打包時不生成.map文件
  productionSourceMap: false,
  externals: {
    vue: 'Vue'
  },
  // 靜態資源打包處理
  build: {
    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();
          }
        }
      }
    }
  },

})