npm install axios --save
npm install echarts --save
npm i element-ui -S

export导出一个对象

1.vue.config.js

与src平级目录
1.跨域
2.打包输出路径
https://www.jianshu.com/p/b358a91bdf2d

module.exports = {
  publicPath: "./",
  //构建时的输出目录
  outputDir: "dist",
  indexPath: "index.html",
  assetsDir: "assets",
  devServer: {
    proxy: {
        '/dz': {     //这里最好有一个
            target: 'http://59.213.167.173/DzService',  // 后台接口域名
            ws: true,        //如果要代理 websockets，配置这个参数
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/dz':''
            }
        },
    }
  }
};

1.1config.js

public静态资源文件夹下配置文件
1.后台接口地址url配置
2.地图token配置

2.interceptor.js

api拦截器
https://blog.csdn.net/qq_28218253/article/details/85158238

1.axios
main.js引入

import "@/api/interceptor";

import axios from "axios";

// 建筑业
export default {
    /**
     * 获取建筑业分市州数据
     * @param {year}            年份
     * @param {month}           月份
     * @param {order}           排序字段
     * @param { IsCenterCity }  是否中心城市
     * **/
    getBuildingByCity (params) {
        return axios.get('/api/Building/GetBuildingByCity',{params})
    },

2.service
https://blog.csdn.net/weixin_43216105/article/details/98877960

// 通用 request.js
import axios from 'axios';
import { Message } from 'element-ui';

import router from '@/router';
import tools from '../../static/tools';

// create an axios instance
const service = axios.create({
  baseURL: urlConfig.fileUrl, // base_url of api, appName usually
  timeout: 5000, // request timeout
  headers: {
    // universal request header
    "token": sessionStorage.myToken,
  },
});
// 兼容ie ie浏览器在请求数据时，url不会自动编码，当url出现中文时会报错
service.interceptors.request.use(config => {
  // showLoading()
  // Do something before request is sent
  config.headers.token = sessionStorage.myToken;
  config.url = encodeURI(config.url);
  return config;
}, error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
});

// respone interceptor
service.interceptors.response.use(
  response => {
    // 返回为json格式数据
    if (response.status === 200) {
       let type = typeof response.data;
      if (type === "string") {
        let data = JSON.parse(response.data);
       
        return Promise.resolve(data);
      }
      else if (type === "object") {
        
        return Promise.resolve(response.data);
      } 
      else {
        return Promise.resolve(response.data);
      }
    }
    else {
      // 对请求 res.data.success = true 时的全局预处理
      response.noData = response.data.data.length === 0;
      return response.data.data;
    }
  },
  error => {
    // 对请求失败时的全局预处理
    if (error.message.includes("timeout")) {
      // 判断请求异常信息中是否含有超时timeout字符串
      Message.error("网络连接超时...");
      return Promise.reject(error); // reject这个错误信息
    }
    return Promise.reject(error);
  });

export default service;

每一项引用

import request from './interceptor'

// 工业经济指标
const getByindustrialinfo = (params) => {
  return request({
    url: 'industrial/info',
    method: 'get',
    params
  })
}

export {
  getByindustrialinfo
}

3.api自动化

api文件夹index.js

const files = require.context("./", false, /\.js$/);
const modules = {}

files.keys().forEach((item) => {
  if (item === './index.js' || item === './interceptor.js') {
    return;
  }
  let name = item.replace(/\.\/|\.js/g, '')
  // 兼容 import export 和 require module.export 两种规范  Es modules  commonjs
  modules[name] = files(item).default || files(item);
});

export modules

引入

import { building as api } from '@/api/index.js'

4.components公共组件自动化（无效）

无效
https://www.v2ex.com/t/517685
components文件夹下index.js

const files = require.context("./", false, /\.vue$/);
const modules = {}

files.keys().forEach((item) => {
  let name = item.replace(/\.\/|\.vue/g, '')
  // 兼容 import export 和 require module.export 两种规范  Es modules  commonjs
  modules[name] = `my$(files(item).default || files(item))`;
});

export modules

引入

import { mySmallNav } from '@/components/index.js'

5.router自动化

router文件夹index.js

const files = require.context("./", false, /\.js$/);
let modules = []

files.keys().forEach(item => {
    if (item === './index.js') return
    // 兼容 import export 和 require module.export 两种规范  Es modules  commonjs
    modules.push(...files(item).default)
});

使用

let router = new VueRouter({
  routes: modules
})

6.项目结构

运行结果