vue实现一次打包在多个环境下部署项目，不用重复打包项目

在实际项目开发中，完整项目分为测试环境和正式环境！这也就意味着前端vue项目中我们需要配置测试环境和正式环境，但如果我们需要根据实际情况一次打包在多个环境中使用我们要如何处理呢？

原理解析（axios为例）：在static文件夹中创建一个config.js，里面配置你得正式域名或测试域名。封装一个axios，每次调用时直接调用封装得调用方法。在封装方法中直接调用config.js中得域名（注：不使用代理）

Q:这里我们为什么把config.js创建在static文件夹中呢？

W:static文件中得内容不会被编译，会被直接复制进去，这样就方便在打包后我们自主修改测试域名或者正式域名。通过这里得配置便不需要我们多次打包。

Q:config文件夹中proxyTable还需要域名配置吗？

W:不需要了，因为封装中得域名调用已经完成了连接请求操作。

操作步骤：

1、static文件中中创建config.js，内容如下：

Collapse Code

2、项目根目录下引入config.js文件

3、封装axios，引用config.js中得域名
 

1. import axios from 'axios'
2. import {Message, MessageBox} from 'element-ui'
3. import {getCookies,setCookies,removeCookies} from '@/utils/cookies'
4. // 创建axios实例
5. let service = axios.create({
6. baseURL: baseUrl+'/test/', // api 的 base_url
7. timeout: 1000 * 30,
8. crossDomain: true,//设置cross跨域
9. withCredentials: false,//设置cross跨域 并设置访问权限 允许跨域携带cookie信息
10. headers: {
11. 'Content-Type': 'application/json; charset=utf-8',
12. 'Control-Allow-Credentials': 'true',
13. }
14. })
15. // 设置 post 默认 Content-Type
16. // service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
17. // request拦截器
18. service.interceptors.request.use(
19. config => {
20. if (getCookies('token')) {
21. // if (process.env.NODE_ENV === 'development') {
22. // // 让每个请求携带自定义token 请根据实际情况自行修改
23. // config.headers['token'] = ''
24. // // config.headers['token'] = getToken()
25. // }
26. // config.headers['token'] = getCookies('token')
27. // config.headers['token'] = getToken()
28. }
29. return config
30. },
31. error => {
32. // Do something with request error
33. console.log(error) // for debug
34. Promise.reject(error)
35. }
36. )
37.  
38. export function checkAuth(res) {
39. if (res.code === 2001 || res.code === 2002) {
40. MessageBox.confirm(
41. '登录状态已过期，您可以继续留在该页面，或者重新登录',
42. '系统提示',
43. {
44. confirmButtonText: '重新登录',
45. cancelButtonText: '取消',
46. type: 'warning'
47. }
48. ).then(() => {
49. // store.dispatch('Logout').then(() => {
50. // location.reload() // 为了重新实例化vue-router对象 避免bug
51. // })
52. })
53. }
54. // else if (res.code === 2003) {
55. // Message.error(res.msg)
56. // }
57. }
58.  
59. // response 拦截器
60. service.interceptors.response.use(
61. response => {
62. // console.log(response)
63. // const code = response.status
64. // if (code < 200 || code > 300) {
65. // Message.error(response.message)
66. // return Promise.reject('error')
67. // } else {
68. // if (response.config && response.config.responseType === 'arraybuffer') {
69. // const gettype = Object.prototype.toString
70. // // console.log(gettype.call(response.data))
71. // if (gettype.call(response.data) === '[object ArrayBuffer]') {
72. // // axioxRespDownload(response)
73. // return {code: 1000, msg: 'success'}
74. // } else {
75. // checkAuth(response.data)
76. // return response.data
77. // }
78. // } else {
79. // checkAuth(response.data)
80. // return response.data
81. // }
82. // }
83. return response.data
84. },
85. error => {
86. console.log("异常：：",error.message)
87. removeCookies('token')
88. removeCookies('user')
89. MessageBox.confirm(
90. '您的账号登录失效，请从新登录！',
91. '登录失效',
92. {
93. confirmButtonText: '确认',
94. cancelButtonText: '取消',
95. type: 'error'
96. }
97. ).then(() => {
98. this.$router.push({path:'/phone'})
99. // window.location.href="/phone"
100. })
101. return Promise.reject(error)
102. }
103. )
104. export default service