vue中怎么快速切换到各种环境，超级实用版
- 怎么在本地开发中快速随时切换 测试环境接口、仿真环境接口、线上环境接口？
- 怎么在本地开发中随意使用console，但是线上环境或者任意环境快速去掉所有console？
- 怎么快速实现其他任何因环境不同的需求？
如果上面的都知道了，就跳出此文吧~
实际开发中的应用
一个项目的访问地址可能有：本地环境、测试环境、仿真环境、正式环境。 一个项目的接口地址可能有：本地环境、测试环境、仿真环境、正式环境。
访问地址是什么决定的呢？
其实就是项目在哪台电脑上。在你本地，就是本地环境，以localhost或者10.xx访问。在测试服务器上，就会以测试的域名或者ip访问。仿真和正式的同理。
接口地址是什么决定的呢？
其实是接口的项目在哪台电脑上。在你本地，就是本地环境，以localhost或者10.xx访问。在测试服务器上，就会以测试的域名或者ip访问。仿真和正式的同理。
项目通过ajax请求接口，现在常用axios，所以项目理论上可以随意切换接口的地址。
但是，很多时候不同环境的接口的appid和appkey不一样，甚至，不同环境的接口地址也不完全相同，想要整个项目能一瞬间切换各种环境的接口，还是需要点准备工作的。
以下是vue中，将项目分为 本地环境、测试环境、仿真环境、正式环境 的步骤。以仿真环境为例。
1. 创建env
根目录下创建 .env.stage，变量需要用VUE_APP开头。只有NODE_ENV和BASE_URL可以单独使用，但有特定的含义。没特殊情况别用.env.production
VUE_APP_API_ORIGIN = 'http://test.com' VUE_APP_API_COMMON_PATH = '/test/apis' VUE_APP_APPKEY = 'key_test' VUE_APP_APPID = '001'
2. 配置代理，简单的理论可以参照此文
根目录下，创建vue.config.js
const API_ORIGIN = process.env.VUE_APP_API_ORIGIN const API_COMMON_PATH = process.env.VUE_APP_API_COMMON_PATH const APPKEY = process.env.VUE_APP_APPKEY const APPID = process.env.VUE_APP_APPID module.exports = { devServer: { proxy: { '/api': { target: API_ORIGIN, pathRewrite: { '^/api': API_COMMON_PATH }, ws: true, changeOrigin: true } } } }
3. 配置axios，更加深度的参照本文，特别棒
一般创建src/common/instance.js,如果有sign的规则，增加src/common/sign.js
先npm i crypto-js qs axios
/** sign.js **/ import md5 from 'crypto-js/md5' const APPKEY = process.env.VUE_APP_APPKEY const APPID = process.env.VUE_APP_APPID // 一般会有sign这个参数，有特定的生成规则 这边是字典排序之后加上appid，MD5 export const getSignStr = params => { // 将key按照字典顺序排列 let orderdKeys = Object.keys(params).sort() // 拿到string的字符串 let str = '' orderdKeys.forEach(key => { const value = params[key] // 接口的参数为空的时候不参加sign，特殊情况，key是file的时候不参加sign const isCanSign = !(key === 'file') isCanSign && (str += `${key}=${value}&`) }) // 前面加上appid 后面加上 appkey str = `appid=${APPID}&appkey=${APPKEY}&${str}appkey=${APPKEY}&appid=${APPID}` // 转小写 => md5 => 转大写 str = str.toLocaleLowerCase() str = md5(str).toString() str = str.toLocaleUpperCase() return str } /** instance.js **/ import axios from 'axios' import Qs from 'qs' import { getSignStr } from './sign' const API_ORIGIN = process.env.VUE_APP_API_ORIGIN const API_COMMON_PATH = process.env.VUE_APP_API_COMMON_PATH const APPID = process.env.VUE_APP_APPID let instance = axios.create({ // 超时时间 timeout: 1000 * 20, // 如果接口希望接口对象形式，下面就是多余的！！！！ 若接口希望收到的数据格式 a=1&b=2，前端传参数的时候希望直接写成对象，然后再这边统一变成字符串传给接口 transformRequest: [ function (data) { return Qs.stringify(data) } ] }) // 请求的时候只是传入路径，这边根据路径加上域名 const getFullApiPath = path => API_ORIGIN + API_COMMON_PATH + path // 一般很多接口会有appid sign 这样的公共参数 const getFullParams = params => { let commonParams = { appid: APPID, sign: getSignStr(params) } params = { ...commonParams, ...params } return params } // 请求拦截器 一般处理所有请求的通用逻辑 instance.interceptors.request.use( // config是关于此次请求所有的信息 config => { const API_ORIGIN = process.env.VUE_APP_API_ORIGIN const API_COMMON_PATH = process.env.VUE_APP_API_COMMON_PATH // 打包的时候，才将接口加上origin，当然如果访问地址和接口地址同源的话，这行就不用了 process.env.NODE_ENV === 'production' && && (config.url = getFullApiPath(config.url)) // 增加公共参数 appid sign，post的请求体是data，get只能是params config.method === 'post' ? (config.data = getFullParams(config.data)) : (config.params = getFullParams(config.params)) return config }, error => Promise.error(error) ) // 响应拦截器 统一处理错误之类的 // instance.interceptors.response.use() export default instance
// 创建`src/common/api.js` import instance from './instance' const AjaxAjaxGetQuartersList = (uid) => { return instance.post('/api/Index', { uid }) } export { AjaxAjaxGetQuartersList }
4. 配置package.json
"scripts": { "serve-stage": "vue-cli-service serve --mode stage", "build-stage": "vue-cli-service build --mode stage", },
5. 根据需求，随意切换命令，就可以切换环境了
- 本地开发的时候，想要切换到仿真环境的接口，运行
npm run serve-stage - 想要打仿真环境的包，运行
npm run build-stage - 想要其他环境，重复上面4步，因为第三步配置axios就不用了，哈哈哈
想要在访问的哪种环境去掉console
比如想要在访问显示线上地址的时候去掉console
1. 配置.env.prod
VUE_APP_HAS_CONSOLE = 0 VUE_APP_API_ORIGIN = 'http://prod.com' VUE_APP_API_COMMON_PATH = '/apis' VUE_APP_APPKEY = 'key_prod' VUE_APP_APPID = '004'
2. 配置vue.config.js
先npm i terser-webpack-plugin -D
const TerserPlugin = require('terser-webpack-plugin') module.exports = { configureWebpack({ optimization: { minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: process.env.VUE_APP_HAS_CONSOLE === 0 } } })] } }) }
3. 配置package.json
"scripts": { "build-stage": "vue-cli-service build --mode prod", },
4. 运行合适的命令
想要访问线上环境的时候，不要console，运行npm run build-prod
抛转引玉
哪个环境不要console不过是个引子。其他的因为环境不同的需求，基本可以用这个逻辑。^(*￣(oo)￣)^
对了，这句话可以记着。有天突然就理解了。
vuecli中，vue-cli-service serve的NODE_ENV是development，serve其实就是本地开发的时候用，vue-cli-service build的NODE_ENV是production，build其实就是打包部署到服务器的时候用。
