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();
          }
        }
      }
    }
  },

})