Vue踩坑

一。vue组件初值问题

子组件list 代码：

<template>
    <div class="list">
        <div class="list-title" @click="show=!show">
            <p class="datetime font_ragular"><i></i> <span>{{list.date.split("-")[1]}}月{{list.date.split("-")[2]}}日</span> </p>
        </div>
        <div class="content" v-if="show">
            <div class="section section1" v-if="list.report.length>0">
                <p class="title font_semibold">财报发布</p>
                <p class="link" v-for="(value,ind) in list.report" :key = "ind"> {{value.name}} &nbsp;{{value.code}}</p>
            </div>
            <div class="section section2" v-if="list.new_shares.length>0">
                <p class="title font_semibold">新股发行</p>
                <div v-for="(value,ind) in list.new_shares" :key="ind">
                    <p class="greytxt font_ragular">{{value.notes}}</p>
                    <p class="link">{{value.name}} &nbsp;{{value.code}} <span class="font_ragular">一键打断</span> </p> 
                </div>
            </div>
            <div class="section section3" v-if="list.ex_dividend.length>0">
                <p class="title font_semibold">除权除息</p>
                <p class="link" v-for="(value,ind) in list.ex_dividend" :key="ind">{{value.name}} <br/> <span class="txt">{{value.notes}}</span> </p>
            </div>
            <div class="section empty" 
            v-if="list.report.length==0 && list.new_shares.length==0 && list.ex_dividend.length==0">
            空
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:["flag","list"],
    data(){
        return{
            show:false,
        }
    },
    mounted(){
        if(this.flag == "1"){
            this.show =true;
        }else{
            this.show = false;
        }
    }
}
</script>

父组件menu代码：

<template>
    <div class="menu">
        
        <div v-for="(value,key,index) in menu" :key="key">
            <list :list="value" :flag="index==0?1:0" :key="index"></list>
        </div>
        
    </div>  
</template>
<script>
import list from "C/menu/list.vue"
import { appEcoCalendarList } from "A/app"
export default {
    components:{
        list
    },
    props:["date","isafter"],//"2019/04/01","0"
    data(){
        return {
            menu:{
                "0":{
                    date:'2019-04-01',
                    report:[],
                    new_shares:[],
                    ex_dividend:[]
                }
            },
            
        }
    },
    created(){
        var that = this;
        appEcoCalendarList(this.date,this.isafter,function(data){
            that.menu={};
            that.menu["0"] = data;
        })
    },computed:{
        dateAndAfter(){
            const a={};
            a["date"]=this.date;
            a["isafter"]=this.isafter;
            return a;
        }
    }
    ,watch: {
        dateAndAfter(n,o){
            var that = this;
            appEcoCalendarList(that.date,that.isafter,function(data){
                if (that.isafter == "0") {
                    that.menu={};
                    that.menu["0"] = data;
                } else {
                    that.menu={};
                    that.menu = data;
                }
            })
        },
        deep:true
    },
}
</script>

子组件中的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生成生产的路径

<script src=/js/app.455ab08b.js></script>

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

<script src=js/app.455ab08b.js></script>

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 等