前端的配置外移

场景：

项目打包部署到正式环境时，如果后端的请求地址或者一些配置项发生改变，前端就必须在打包前的源码里重新更改基准地址，重新打包给后端部署，费时费力，比较麻烦。

解决方案:

配置外移：将需要打包的url地址或者配置项，单独写到config文件里，在打包时，单独打包成一个serveConfig文件，直接在该文件修改即可。

实现步骤：

1.npm 下载 generate-asset-webpack-plugin

npm install generate-asset-webpack-plugin --save-dev

2.将需要打包的地址单独写到一个文件中（config.js)

module.exports = {
  serverConfig: {
    // 服务器请求地址
    VUE_APP_API_BASE_URL: process.env.VUE_APP_API_BASE_URL
  }
}

3.在vue.config.js 中引入config.js 配置generate-asset-webpack-plugin单独打包的参数

// 引入打包的url对象
const { serverConfig } = require('./src/config.js')

=================================


chainWebpack: config => {
  config
    .plugin(GenerateAssetPlugin)
    .use('generate-asset-webpack-plugin', [{
      filename: 'serverConfig.json', // 单独打包后输出的文件名
      fn: (compilation, cb) => {
        cb(null, JSON.stringify(serverConfig)) // 打包的对象
      },
      extraFiles: []
    }])
    }

4.此时，webpack在打包时，就会在dist目录下单独生成一个叫serverConfig.json的文件，文件的内容就是config.js里的对象，此时我们只要在源码里，判断下是否为生产环境或者是否有serverConfig.json文件对象，如果有，则需要将请求的基准地址改为serverConfig.json上的地址。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/router/filter.js' // 路由拦截配置
import '@/plugins' // 引入插件配置
import '@/components' // 引入全局组件
import '@/utils' // 引入全局属性方法
import '@/request/api.js' // 引入接口

import request from './request'
const { serverConfig } = require('./config.js')

Vue.config.productionTip = false

const render = () => {
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
}

if (process.env.NODE_ENV === 'development') {
    // 开发环境则将基准地址设为config.js上的地址
  Vue.prototype.$configApiUrl = serverConfig
  render()
} else {
    // 生产环境下（打包后）通过axios get请求 获取config.js打包出来的serverConfig.json里的对象 设为基准地址
  request.get('serverConfig.json').then((result) => {
    Vue.prototype.$configApiUrl = result
    render()
  }).catch((error) => {
    console.log('getConfigJson Error!', error)
  })
}

5.在请求拦截里 为请求设置基准地址

import axios from 'axios'
import Vue from 'vue'

const vm = new Vue()

const service = axios.create({
})

// 配置请求拦截器
service.interceptors.request.use(config => {
    // 判断请求的路径是否为serverConfig.json 是则不设置基准地址
  if (config.url.includes('serverConfig.json')) {
    config = {
      ...config,
      baseURL: ''
    }
  } else {
      // 如果是普通请求 则设置基准地址
    config = {
      ...config,
      baseURL: vm.$baseURL.VUE_APP_API_BASE_URL
    }
  }
  return config
})


export default service