nuxt3按需导入element-plus，nuxt3区分环境

放假前整了一个nuxt3项目练手，想着把element-plus组件库导入进去，但是要用按需加载方式，整了半天代码进去了，样式没进去。放假回来开窍了，搞定成功。

放假时间：9.28——10.23，可劲羡慕吧。婚假+十一

仓库地址：github.com/ht-sauce/3d…

一、解决element-plus按需导入

1、按element-plus官方的方式把按需加载的插件都装好

pnpm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus

2、nuxt.config.ts配置部分

// https://v3.nuxtjs.org/api/configuration/nuxt.config
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

// 获取当前执行命令的自定义环境
const ExcutingAnOrder = process.env.npm_lifecycle_script.split(' ')
const env = ExcutingAnOrder[ExcutingAnOrder.length - 1]

const lifecycle = process.env.npm_lifecycle_event
export default defineNuxtConfig({
  app: {
    baseURL: '/ht',
  },

  runtimeConfig: {
    // 不在public部分为仅在服务器下可用
    env,
    public: {
      env,
    },
  },
  build: {
    transpile: lifecycle === 'build' ? ['element-plus'] : [],
  },
  // vite配置放在这里
  vite: {
    plugins: [
      ElementPlus({ useSource: true, defaultLocale: 'zh-cn' }),
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: 'sass', ssr: true })], // 注意ssr配置参数
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'sass', ssr: true })],
      }),
    ],
    css: {
      // 自定义主题和解决样式未导入问题
      preprocessorOptions: {
        scss: {
          additionalData: `@use "~/theme/element-plus/rest.scss" as *;`,
        },
      },
    },
  },
})

3、以上解决了组件代码和绝大多数样式导入问题，但是css变量未导入，导致主题无颜色

解决

rest.scss文件，核心是最后一行

// 命名空间
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'el'
);

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    //'primary': (
    //  'base': green,
    //),
  ),
);
// 导入scss基础变量文件，这里是核心，通过该导入解决scss变量没有导入的问题
@import "element-plus/theme-chalk/src/base.scss";

二、如何在nuxt3下区分生成，测试，开发，预发布环境

通过nodejs的process.env中去获取运行环境

// 获取当前执行命令的自定义环境
const ExcutingAnOrder = process.env.npm_lifecycle_script.split(' ')
const env = ExcutingAnOrder[ExcutingAnOrder.length - 1]

然后存入

  runtimeConfig: {
    // 不在public部分为仅在服务器下可用
    env,
    public: {
      env,
    },
  },

最后通过useRuntimeConfig来获取环境变量，当然是需要注意区分是在服务器下运行还是在页面运行。