Vue3之Vite中由element ui更新导致的启动报错解决

下面我来详细讲解“Vue3之Vite中由element ui更新导致的启动报错解决”的完整攻略。

问题背景

在使用Vue3+Vite构建项目时，出现了一个问题：更新element ui库后，启动项目时报错，浏览器控制台显示ReferenceError: process is not defined。这是因为element ui 2.14.1版本开始，使用了process全局变量，而Vite默认情况下是不提供process全局变量的。所以需要对Vite进行配置，将process全局对象注入到应用当中。

解决方案

方案一：手动修改Vite配置

在Vite的配置文件vite.config.js中注入process全局变量。

1. 在项目根目录创建文件vite.config.js
2. 在vite.config.js中配置如下内容：

export default {
  define: {
    'process.env': {}
  }
}

其中，define选项用于注入全局变量，可以将需要注入的全局变量放入键值对中，这里将process.env设为空对象，目的是为了让process变量在项目中存在。

方案二：使用插件vite-plugin-style-import

这是一款基于Vite的插件，用于自动引入第三方 UI 库的 CSS 文件，它还提供了添加全局依赖项和引入 .less、.scss 等 CSS 预处理器的能力。同样可以解决process is not defined的问题。

1. 安装插件：

npm install vite-plugin-style-import -D

1. 在vite.config.js中配置插件：

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

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            name = name.slice(3)
            return `element-plus/packages/theme-chalk/src/${name}.scss`
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`
          },
        },
      ],
    }),
  ],
})

这里以按需引入elelment-plus为例，其他的UI框架类似，styleImport插件会在编译过程中根据配置引入相应的样式文件，同时也会注入process全局对象，从而解决了process is not defined问题。

以上两种方案都可以解决process is not defined问题，可以根据自己的需求选择其中的一种。

示例说明

以下是以elelment-plus为例的两条示例说明：

示例一：手动修改Vite配置

1. 在项目根目录下创建vite.config.js文件。
2. 在vite.config.js中添加如下代码：

export default {
  define: {
    'process.env': {}
  }
}

1. 在项目中安装elelment-plus：

npm i element-plus -S

1. 在组件中按需引用element-plus：

import { ElButton } from 'element-plus'
import 'element-plus/lib/theme-chalk/el-button.css'

export default {
  components: {
    ElButton
  }
}

示例二：使用插件vite-plugin-style-import

1. 在项目中安装插件vite-plugin-style-import：

npm i vite-plugin-style-import -D

1. 在vite.config.js中添加如下代码：

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

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            name = name.slice(3)
            return `element-plus/packages/theme-chalk/src/${name}.scss`
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`
          },
        },
      ],
    }),
  ],
})

1. 在组件中按需引用element-plus：

import { ElButton } from 'element-plus'

export default {
  components: {
    ElButton
  }
}