vue项目打包发布踩过的坑

1.vue打包之后，背景图片不显示问题
找到build/utils.js文件
修改成为如下所示内容：

2.vue写成懒加载的方式，打包发布部署到服务器报错，修改为下面的内容config目录下的index.js的assetsPublicPath修改为下面的内容

3.vue从后台获取数据时，串接口数据，保存sessionid，vue中登录成功后台自动将token保存进入session缓存，解决前端每次生成的token不同与后端保存的不一致，无法访问下一个接口的问题。

axios.defaults.withCredentials = true;

4.vue与后台api接口的交互–axios的应用
参考原作者：https://blog.csdn.net/joyce_lcy/article/details/78873733
（1）安装axios

npm install axios --save-dev

（2）修改原型链

import axios from 'axios
Vue.prototype.$ajax = axios

（3）在组件中引用

mounted(){

    //GET
    this.$ajax({
      method: 'get',
      // url:'../static/test/getInfo.json', //<---本地地址
      url: '/api/drummer/8bd17859',
    }).then(response=>{
      let _data=response.data;
      alert("hello," + _data.username);
    }).catch(function(err){
        console.log(err)
    })

    //POST
   this.$ajax({
       method: 'post',
       url: 'http://127.0.0.1:8080/edsf-sgc/webapi/user/login',
       data: {'loginName': 'k00000', 'pwd': '123456'},
       headers: {
        'Content-Type': "application/json" // 解决跨域问题
       }
      }).then(response => {
       this.$router.push({name: 'servePersonView'});
      }).catch(function (err) {
       console.log(err);
      })

（4）为了解决浏览器的兼容问题，安装es6-promise

npm install es6-proimse --save-dev
main.js中引入
import Es6Promise from 'es6-promise'
Es6Promise.polyfill();

5.Vue项目 测试、发布root地址配置
（1）prod.env.js

（2）prod.env.js

（3）index.js的配置
在这里插入图片描述


（4）在main.js中进行配置

import axios from 'axios'；
Vue.prototype.baseURL = process.env.API_ROOT；
axios.defaults.withCredentials = true ；
引用的时候直接使用this.baseURL +api地址 即可

6.echart图data数据部分动态获取后台数据
先从后台获取到值，然后再给option添加seris的属性，最后再做绘图的操作