问题描述

在开发 uni-app 项目时,可能会遇到 process is not defined 的错误。该错误通常出现在使用 process.env 访问环境变量时,但 process 对象未被定义。原因是 uni-app 运行在浏览器或小程序环境中,而非 Node.js 环境,因此 process 对象不可用。

解决方法

方法一:使用 uni-app 自带的环境变量

uni-app 提供了内置的环境变量 process.env.NODE_ENV,可以通过它判断当前环境是开发还是生产4bv.yj-gov.cn。

if (process.env.NODE_ENV === 'development') {
  console.log('开发环境');
} else {
  console.log('生产环境');
}

方法二:手动定义环境变量

vue.config.jsvite.config.js 中配置 define,将环境变量注入到全局cec.qyane.com。

使用 Vite
// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
  plugins: [uni()],
  define: {
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      CUSTOM_VAR: JSON.stringify('your_value'),
    },
  },
});

使用 Webpack
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          CUSTOM_VAR: JSON.stringify('your_value'),
        },
      }),
    ],
  },
};

方法三:使用 .env 文件

在项目根目录下创建 .env 文件,并在构建工具中配置加载ime.ittv.mobi。

.env 文件示例
VUE_APP_API_URL=https://api.example.com

在代码中访问
const apiUrl = import.meta.env.VUE_APP_API_URL; // Vite
// 或
const apiUrl = process.env.VUE_APP_API_URL; // Webpack

方法四:使用全局变量替代

如果仅需少量变量,可以直接在 main.js 中定义全局变量。

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.config.globalProperties.$env = {
  API_URL: 'https://api.example.com',
};

app.mount('#app');

示例代码

以下是一个完整的示例,展示如何在 uni-app 中正确处理环境变量。

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 定义全局环境变量
app.config.globalProperties.$env = {
  API_URL: process.env.NODE_ENV === 'development' 
    ? 'http://localhost:3000' 
    : 'https://api.example.com',
};

app.mount('#app');

// 在组件中使用
export default {
  mounted() {
    console.log('API URL:', this.$env.API_URL);
  },
};

注意事项

  1. uni-app 中,尽量避免直接依赖 process,因为其行为可能因平台而异。
  2. 使用构建工具(如 Vite 或 Webpack)的 define 功能可以更灵活地注入环境变量。
  3. 小程序环境中,部分全局变量可能需要通过 uni.getSystemInfoSync() 获取cjt.nanyangdq.cn。
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐