# Vue-Cli3.0常用配置 (六)

let path = require('path');
let skeletionWebpackPlugin = require('vue-skeleton-webpack-plugin');


module.exports = {
    publicPath:process.env.NODE_ENV === 'production'? '/vue-project':'/',
    outputDir:'myassets', // 输出路径
    assetsDir:'static', // 生成静态目录的文件夹
    runtimeCompiler: true, // 是否可以使用template模板
    parallel:require('os').cpus().length > 1, //多余1核cpu时 启动并行压缩
    productionSourceMap:false, //生产环境下 不使用soruceMap

    // https://github.com/neutrinojs/webpack-chain
    chainWebpack:config=>{
        // 控制webpack内部配置
        config.resolve.alias.set('component',path.resolve(__dirname,'src/components'));
    },
    // https://github.com/survivejs/webpack-merge
    configureWebpack:{
        // 新增插件等
        plugins:[
            new SkeletonWebpackPlugin({
                webpackConfig: {
                    entry: {
                        app: resolve('./src/skeleton.js')
                    }
                }
            })
        ]
    },
    devServer:{ // 配置代理
        proxy:{
            '/api':{
                target:'http://a.zf.cn:3000',
                changeOrigin:true
            }
        }
    },
    pages: {
        index: { // 首页入口
            entry: "./src/main.js"
        },
        other: { // 其他页面入口
            entry: './src/a.js',
            chunks:['other'] // 引入的资源
        }
    },
    // 第三方插件配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 插入全局样式
                path.resolve(__dirname,'src/assets/common.less'), 
            ],
        }
    }
}

import Vue from 'vue';
export default new Vue({
  components: {
    Skeleton:{
      template:`<div>skeleton</div>`
    }
  },
  template: `
    <Skeleton></Skeleton>
  `
});

import axios from 'axios';
let baseUrl = process.env.NODE_ENV !== 'production'?'http://localhost:8080':'/';
class AjaxRequest{
  constructor(){
      this.baseURL = baseUrl; // 配置默认路径
      this.requestQueue = {}; // 缓存当前请求队列 用来操作loading的显示或者隐藏
  }
  configInterceptors(instance,url){
      // 配置请求拦截
      instance.interceptors.request.use( (config) => {
          //  loading效果 开始请求前显示loading
          if(Object.keys(this.requestQueue).length === 0){
              console.log('显示loading');
          }
          this.requestQueue[url] = config.url;
          return config;
      });
      // 配置响应拦截
      instance.interceptors.response.use(res=>{
          // 取消loading效果
          delete this.requestQueue[url];
          if(Object.keys(this.requestQueue).length === 0){
              console.log('取消loading');
          };
          if(res.status !== 200){
              return Promise.reject(res);
          }else{
              return res.data;
          }
      })

  }
  request(config){
      // 创建一个axios实例
      let instance = axios.create();
      // axios(config);
      config = {baseURL:this.baseURL,...config};
      this.configInterceptors(instance,config.url);
      return instance(config);
  }
}
export default new AjaxRequest();