vue打包后的config配置文件

用vue-cli构建的项目一般是采用先后端分离的开发模式，也就是前端与后台彻底分离，此时就须要将后台接口地址打包进项目中，此时若是只是改个接口地址也要从新打包那就太麻烦了，解决方法是直接加个config.js文件

1.首先咱们在static文件下创建一个js文件，就叫config.js吧，内容为

window.g = {
  AXIOS_TIMEOUT: 10000,
  ApiUrl: 'http://localhost:21021/api/services/app', // 配置服务器地址,
  ParentPage: {
    CrossDomainProxyUrl: '/Home/CrossDomainProxy',
    BtnsApi: '/api/services/app/Authorization/GetBtns',
    OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
  },
}

 

2.接下来咱们只须要在index.html这个入口文件里引入该文件（注意路径就ok）

<script type="text/javascript" src="/static/config.js"></script>

3.而后你就能够在你须要的地方随意获取就好了，好比

var baseURLStr = window.g.ApiUrl
// 建立axios实例
const service = axios.create({
  baseURL: baseURLStr, // api的base_url
  timeout: 5000 // 请求超时时间
})

 

4.最后在打包成功以后，config,js文件不会被打包，依然存在static文件夹下，若是须要修改只须要用记事本打开文件修改地址就OK了，并且该方法也不会影响开发模式。