vue-cli 【已解决】 require is not defined 和 exports is not defind

### UniApp Vue3 使用 MQTT 出现 `process is not defined` 的解决方案 在 UniApp 项目中集成 Vue3 和 MQTT 库时，可能会遇到 `process is not defined` 错误。此问题源于某些库依赖 Node.js 特定的全局对象（如 `process`），而这些对象并未默认存在于浏览器环境中。 #### 修改 Vite 配置文件 对于基于 Vite 构建工具的 UniApp 项目，在 `vite.config.ts` 文件内添加自定义配置来模拟缺失的对象： ```typescript // vite.config.ts import { defineConfig } from 'vite' export default defineConfig({ // ... define: { 'process.env': {}, global: {} }, optimizeDeps: { esbuildOptions: { define: { global: 'globalThis', process: '{}' } } } }) ``` 上述设置通过覆盖默认行为引入必要的 polyfill[^1]。 #### Webpack 插件方式处理 如果采用的是 Webpack 打包方案，则可以在项目的构建配置里加入相应的插件支持： ```javascript // uniapp根目录下的vue.config.js 或 build/webpack.base.conf.js const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ] }, chainWebpack(config) { config.module.rule('js') .use('babel-loader') .tap(options => ({ ...options, presets: [...(options.presets || []), '@vue/cli-plugin-babel/preset'], plugins: [['transform-es2015-modules-commonjs']] })) } } ``` 这段代码片段利用了 ProvidePlugin 来自动注入所需的模块实例化语句[^3]。 #### 替代方法：调整应用逻辑 另一种可行的方法是从根本上改变应用程序如何访问环境变量或其他仅限于服务器端的功能。例如，可以考虑将所有涉及敏感数据的操作迁移到后端服务，并通过 API 接口获取所需信息；或者寻找专门为前端设计的支持更好的替代品。