Quando o element-plus é importado sob demanda, o problema de usar um tema personalizado no vite é invalidado

1. Descrição do processo de geração do problema:

1) Use o vite para criar um projeto vue3

 2) Instale os axios element-plus vue-router passo a passo 

npm i element-plus vue-router axios -S

3) Importe o element-plus conforme necessário e siga as etapas no site oficial

Tema | Elemento Plus

 4) Axios escreve interceptadores comuns de acordo com o pensamento geral

import axios from "axios";
import { ElMessage } from 'element-plus'
import "element-plus/es/components/message/style/css"

// 这里打包后，可以修改根目录下的config.js进行修改
axios.defaults.baseURL = Window.apiConfig[process.env.NODE_ENV].baseUrl

// 请求拦截器，内部根据返回值，重新组装，统一管理。
axios.interceptors.response.use(res => {
    const { data } = res;
    if (typeof data !== 'object') {
        ElMessage.error('服务器异常，请联系管理员')
        return Promise.reject(res);
    }
    if (data.code != 200) {
        if (res.data.message)
            ElMessage.error(res.data.message)
        return Promise.reject(res.data);
    }

    return data
}, (err) => {
    ElMessage.error({
        showClose: true,
        message: '服务器异常，请联系管理员',
        type: 'error',
    })
    return Promise.reject(err)
})

5) Escreva um teste de login. É lógico que a cor do tema verde deve ser exibida normalmente aqui, mas ainda é azul! ! ! !

 

2. Processo de resolução de problemas

Encontrei muitos métodos na Internet, mas não funcionou mesmo se eu usasse o valor total, e tentei mesmo se a posição estivesse errada, porque o blogueiro criou com sucesso inúmeros temas personalizados no webpack antes. primeira vez que uso o vite, e acho que deve ser parecido. O método de escrita acima é escrito de forma semelhante de acordo com o webpack.

Parece que pode não ser viável na Internet. Você tem que confiar em si mesmo no momento crítico. O problema é que o estilo de caixa de mensagem introduzido no axios substituirá o tema personalizado.

Algumas pessoas podem perguntar, o que aconteceu com a introdução disso, não se preocupe, a chamada altura mágica é de um pé, e a estrada tem um pé de altura, existem duas maneiras aqui, escolha por si mesmo e sugira pessoalmente o automático introdução

1) Primeiro, exclua o componente e o estilo da caixa de mensagem introduzido manualmente por axios.js

2) Método 1: Introduzir o estilo da caixa de mensagem globalmente em main.js. Quanto ao local onde é utilizado, ainda precisa ser introduzido manualmente

3) Método 2: Importar automaticamente na configuração do vite.config.js

        Instalar dependências

npm  i unplugin-auto-import -D

        Se o item de configuração em vite.config.js

    // 自动引入，注意这里需要在Components之后引入
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
          importStyle: "sass",
        }),
      ],
    }),

3. A seguir está todo o conteúdo do arquivo vite.config.js

/*
 * @Author: liuxin
 * @Date: 2023-03-20 14:32:35
 * @LastEditors: liuxin
 * @LastEditTime: 2023-03-20 18:02:20
 * @Description: 
 */
import path from "path";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": `${path.resolve(__dirname, "src")}`,
    },
  },
  css: {
    // 全局引入自定义的主题包，以及一些自用函数和自用变量
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/elementplus.scss" as *;@use "@/styles/mixins.scss" as *;@use "@/styles/variable.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    //按需引入element
    Components({
      resolvers: [
        ElementPlusResolver({
          // 按需引入修改主题色添加这一行，使用预处理样式
          importStyle: "sass",
        }),
      ],
    }),
    // 自动引入，注意这里需要在Components之后引入
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
          importStyle: "sass",
        }),
      ],
    }),
  ],
})