Uniapp | uniapp多环境开发部署

1、vue2

在vue2中我们可以直接在package.json中添加代码，获取环境只需要 process.env 获取到，运行的时候，会有三个选项，执行某一个即可。

"uni-app": {
  "scripts": {
    "dev": {
      "title": "微信小程序——开发版",
      "env": {
        "name": "dev",
        "UNI_PLATFORM": "mp-weixin",
        "VUE_APP_BASE_URL": "xxxxx"
      }
    },
    "test": {
      "title": "微信小程序——测试版",
      "env": {
        "name": "test",
        "UNI_PLATFORM": "mp-weixin",
        "VUE_APP_BASE_URL": "xxxx"
      }
    },
    "pro": {
      "title": "微信小程序——正式版",
      "env": {
        "name": "pro",
        "UNI_PLATFORM": "mp-weixin",
        "VUE_APP_BASE_URL": "xxx"
      }
    }
  }
}

2、vue3

在vue3中获取不到 process。所以需要一些改造。

• 同样需要添加上面的 pagkage.json 中的代码，方便运行。
• 创建几个文件

本地开发环境

export default {
  ENV: "dev",
  VUE_APP_BASE_URL: "xxx",
};

线上生产环境

export default {
  ENV: "pro",
  VUE_APP_BASE_URL: "xxx",
};

测试环境

export default {
  ENV: "test",
  VUE_APP_BASE_URL: "xxx",
};

导出环境

// 导出上面的环境
import dev from "./.env.dev";
import test from "./.env.test";
import pro from "./.env.pro";

export default {
  dev,
  test,
  pro,
};

• 修改vite.config.ts
  ```
  import { defineConfig } from "vite";
  import uni from "@dcloudio/vite-plugin-uni";
  import path from "path";
  import ENV_CONFIG from "./src/utils/.env";

export default defineConfig({
// 添加 @
resolve: {
alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
},
plugins: [uni()],
define: {
"process.env.config": ENV_CONFIG,
},
});
```

• 使用的时候，获取请求地址。
  process.env.config[process.env.name].VUE_APP_BASE_URL。这样就可以获取到不同环境下的请求地址。