vue脚手架的分包构建

vue脚手架构建分包流程

分包构建指令创建

• Package.json文件里的script添加打包指令

"uat": "vue-cli-service build --mode uat"
uat为执行指令
--mode 后面的uat为包名

添加环境变量

• 创建.env.uat文件,文件名.env为固定名称后面的.uat与环境变量名保持一致
• 在.env.uat文件设置新的全局环境变量

NODE_ENV = 'uat' //设置环境变量

创建apiUrl.js,在该文件里面设置请求环境，根据运行环境切换请求地址。

//api
const production_api_url = 'https://usercenter.api.dxanm.com'
const uat_api_url = 'http://jd_test_user_center_api.jifan.net.cn'
//cpi
const production_cpi_url = 'https://coupon.api.dxanm.com'
const uat_cpi_url = 'http://jd_test.coupon.jifan.net.cn'
//upi
const production_upi_url = 'https://usercenter.api.jifan.net.cn'
const uat_upi_url = 'http://jd_test_user_center_api.jifan.net.cn'

export const api = process.env.NODE_ENV == 'production'?production_api_url:(process.env.NODE_ENV == 'uat'?uat_api_url:'api')

export const cpi = process.env.NODE_ENV == 'production'?production_cpi_url:(process.env.NODE_ENV == 'uat'?uat_cpi_url:'cpi')

export const upi = process.env.NODE_ENV == 'production'?production_upi_url:(process.env.NODE_ENV == 'uat'?uat_upi_url:'upi')

将该文件对外暴露的地址在main.js里面进行注册

import {
    
     api, cpi, upi} from './utils/apiUrl'
Vue.prototype.api = api
Vue.prototype.cpi = cpi
Vue.prototype.upi = upi

在.vue文件里面通过this去调用

axios.get(this.api+'xxxxxx').then(res=>{
    
    
  
})