后端使用的项目和环境已经固定,前端可以根据后端的环境来配置多环境打包,以便在项目进程中切换和部署多个环境的代码
- 复制.env文件,编写多环境.env变量 如.env.development, .env.testing, .etc 将项目需要相应的后端api接口配置到环境中,用文件区分环境
- 设置环境变量,例:package设置该环境中需要的变量,例.env.jsonlocal
代码块 language js NODE_ENV=local VUE_APP_BASE_API='https://api-hotel-dev.scjswk.com/' VUE_APP_BASE_SOCK='https://api_msg_test.scjswk.com' VUE_APP_BASE_SOCKON='wss://ws_msg_test.scjswk.com/?msg_token=' # 将项目需要相应的后端api接口配置到环境中,用文件区分环境
- 配置多环境脚本 例:package.json
代码块 language js "scripts": { "local": "vue-cli-service serve", "dev": "vue-cli-service serve --mode development", "test": "vue-cli-service serve --mode testing", "uat": "vue-cli-service serve --mode uat", "prod": "vue-cli-service serve --mode production", "build:local": "vue-cli-service build", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode testing", "build:uat": "vue-cli-service build --mode uat", "build:prod": "vue-cli-service build --mode production", },
- 本地运行 npm run dev 即可启用调用后端相应环境的接口
- 运行 npm run build:local 或 npm run build:dev 打包编译相应环境的web包到 dist
...