uniapp构建，基于 vue3.0 + vite + HbuilderX

前言

提示： 在 uniapp 项目中使用 vue3.0 和 vite，并且通过 HBuilderX 打包时，如果你有 .env, .env.test, .env.prod 等环境配置文件，确保正确使用这些环境配置文件来打包生产环境，可以按照以下步骤进行配置。

---

一、 确保 .env 文件配置正确

确保你的 .env, .env.test, .env.prod 文件中包含正确的环境变量。例如：

VITE_APP_ENV=development
VITE_APP_ENV=production
VITE_APP_ENV=test

二、 修改 package.json 脚本

使用 cross-env 来设置环境变量，并确保 vite 使用正确的环境配置文件。

{
  "scripts": {
    // ... existing scripts ...
    "build:mp-weixin": "cross-env NODE_ENV=production VITE_APP_ENV=production uni build -p mp-weixin --mode prod"
    // ... existing scripts ...
  }
}

三、确保 vite.config.js 读取环境变量

在 vite.config.js 中，确保正确读取环境变量并进行相应的配置， 其中VITE_BASE_API为我自己项目里的环境变量接口域名。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],
    define: {
      'process.env': {
	      VITE_APP_ENV: process.env.VITE_APP_ENV,
	      VITE_BASE_API: process.env.VITE_BASE_API
	    }
    },
    // 其他配置...
  }
})

四、使用 HBuilderX 打包

在 HBuilderX 中，确保选择了正确的打包命令。你可以在终端中运行以下命令来打包：

npm run build:mp-weixin

五、验证环境变量

确保在代码中正确使用环境变量。例如：

console.log('Current Environment:', import.meta.env.VITE_APP_ENV)

这样可以确保在打包时使用 .env.prod 文件中的配置，并且正确设置生产环境变量。