Vue踩坑

一。vue组件初值问题

子组件list 代码：

父组件menu代码：

子组件中的list由父组件传入，在请求接口更新menu之前，vue会拿data里面的menu初始化list组件,那么问题就出现了，
假设menu初值为{}，子组件中的list.date.split，list.report.length等数据操作就会报错。
解决方法就想上面的代码那样，将menu的默认值写成可以解析并初始化的格式

二。vue生产化配置，即npm run build生产的代码时，产生的dist文件在服务器中运行时出现空白页，有时候还会默认为ie内核初始化问题

1.生产配置说明

let path= require("path");
const webpack = require("webpack");
function resolve(dir){
  return path.join(__dirname,dir);
}

module.exports = {
    publicPath: './', // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
    lintOnSave:false,//eslint严格模式关闭
    //反向代理，这个配置是node本地serve，所以只会在本地调试时生效，生产不会生效
    devServer: {
      // 环境配置
      proxy: {
        '/app': {
            target: 'http://dev-app.cmbi.online',
            changeOrigin: true,
            ws: true,
            pathRewrite:{
              '^/app':'/app'//将/app开头的请求全部替换
            }
        }
      },
      overlay:{
        warnings:false
      }
    },
    chainWebpack: config => {
      config.resolve.alias
        .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
        .set("C",resolve('src/components'))
        .set("A",resolve('src/api'))
    },
    
  }

axios 中的baseUrl配置

import axios from 'axios'
import Qs from 'qs'

const service = axios.create();
service.defaults.baseURL = process.env.NODE_ENV ==="development"?'':"http://dev-app.cmbi.online";
//生产的baseUrl为固定连接，本地为空（为了不使本地反向代理失效）
service.interceptors.request.use(function(config){
    if(config.data){
        config.data= Qs.stringify(config.data)
    }
    return config;
})


// respone拦截器
service.interceptors.response.use(
    response => {
        /**
         * code为非20000是抛错 可结合自己业务进行修改
         */
        
        // console.log(response.data)
        const res = response.data
        if (res.result != "1") {
            alert(res.message);
            return null;
        } else {
            return response.data;
        }
    },
    err => {
        //console.log(err);
        if (err && err.response) {
            switch (err.response.status) {
              case 400:
                err.message = '请求错误'
                break
        
              case 401:
                err.message = '未授权，请登录'
                break
        
              case 403:
                err.message = '拒绝访问'
                break
        
              case 404:
                err.message = `请求地址出错: ${err.response.config.url}`
                break
        
              case 408:
                err.message = '请求超时'
                break
        
              case 500:
                err.message = '服务器内部错误'
                break
        
              case 501:
                err.message = '服务未实现'
                break
        
              case 502:
                err.message = '网关错误'
                break
        
              case 503:
                err.message = '服务不可用'
                break
        
              case 504:
                err.message = '网关超时'
                break
        
              case 505:
                err.message = 'HTTP版本不受支持'
                break
        
              default:
            }
          }
        return Promise.reject(err);
    }
)

export default service;

2.空白页出现原因：

1.首先是vue.config.js内的publicPath需要设置为“./”

module.exports = {
    publicPath: './', 
}

当设置为“/”的时候，build生成生产的路径

当设置为“./”的时候，build生成生产的路径

2.然后可能是router的配置设置成了history，而apache没有配置，具体来讲就是history模式需要有服务端的支持才能实现
没有服务端的支持，不要配成如下形式：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

3.不管怎么该配置都是ie内核的初始化界面，直接改一下服务器的域名，
如 www.vue.com 改一下改成 www.myvue.com 等