Project Structure Config

1. dev.env.js

Development environment configuration:

'use strict'
// Consolidated Configuration
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  CONF_ENV: `"${process.env.CONF_ENV}"`,
  NODE_ENV: '"development"',
  // Interface Address
  API_HOST: {
    workreport: '"/api_workreport"',
    file: '"http://pps.banggood.cn:8083"',
    wx_gateway: '"http://pps.banggood.cn:8099"'
  }
})

2. prod.env.js

Production environment configuration:

var config = {
  CONF_ENV: `"${process.env.CONF_ENV}"`,
  NODE_ENV: '"production"',
  API_HOST: {
    workreport: '"/"',
    file: '"http://pps.banggood.cn:8083"',
    wx_gateway: '"http://pps.banggood.cn:8099"'
  }
}

if (process.env.CONF_ENV === 'deploy') {
  config.API_HOST.workreport = '"https://m-workreport.banggood.cn"'
  config.API_HOST.file = '"https://finder.banggood.cn"'
  config.API_HOST.wx_gateway = '"https://wechat.banggood.cn"'

}

module.exports = config

3. index.js

'use strict'

const path = require('path')
var cookie = ''
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/workreport-front-mobile/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist/workreport-front-mobile'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: process.env.PORT || 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api_workreport': {
        target: 'http://m.workreport.pps.banggood.cn:8082',
        changeOrigin: true,
        pathRewrite: (path, req) => path.replace('/api_workreport', ''),
        headers: {
          cookie
        }
      }
    },
    cssSourceMap: false
  }
}

Project Src

Here I would like to start by describing some of the tools utils involved in the project:

1. apiFetch.js

import axios from 'axios'

export default function apiFetcher (config) {
  const service = axios.create({
    timeout: 20000,
    withCredentials: true,
    ...config
  })

// Expose some methods and required parameters
export function getReportTemplate ({beginDate, endDate, reportDateType, reportType} = {}) {
  return apiFetch({
    url: '/report/template/getReportTemplate',
    method: 'post',
    data: {
      eqBeginDate: beginDate,
      eqEndDate: endDate,
      eqReportDateType: reportDateType,
      eqReportType: reportType
    }
  })
}

/* Then import {getReportTemplate} from a different file path*/
getReportTemplate({
          reportDateType: this.reportDateType,
          reportType: this.reportType
        }).then(res => {
           this.$vux.loading.hide()
        }).catch((e) => {
           console.error(e)
           this.$vux.loading.hide()
        })

2. datePicker.js

/**
 * Get Thursday of the Year
 * @param year Incoming e.g.  2017
 * @returns {Array} Thursday's Array
 */
function getOneYearDates (year) {
  let allDate = []
  let theDay = new Date(year, 0, 1)
  let weekDay = theDay.getDay()
  let goDay = new Date(theDay.getFullYear(), theDay.getMonth(), theDay.getDate() + CUT_OFF_DAY - weekDay - 7)
  while (goDay.getFullYear() <= year) {
    if (goDay.getFullYear() === year) {
      allDate.push(goDay)
    }
    goDay = new Date(goDay.getFullYear(), goDay.getMonth(), goDay.getDate() + 7)
  }
  return allDate
}

3. fileUpAndDownUtils.js / reportChangeUtils.js

// Control file size--in MB
  const fileSize = file.size / 1024 / 1024

  if (fileSize > 100) {
    Vue.$vux.toast.show({
      type: 'cancel',
      text: 'File size cannot exceed 100 MB !'
    })
    return false
  }

// Control the format of uploaded files
const fileExt = file.name.split('.').reverse()[0].toLowerCase().trim()
  const allowFileExt = ['xls', 'xlsx', 'wps', 'ppt', 'pptx', 'doc', 'docx', 'et', 'dps',
    'txt', 'pdf', 'html', 'htm', 'hlp', 'dll', 'vsdx', 'xmind', 'md', 'chm', 'zip', 'rar', 'jar',
    'psd', 'png', 'pic', 'jpg', 'ico', 'gif', 'bmp', 'eps', 'jpeg'
  ]

Entry FileMain.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store'
import IconSvg from '@/components/icon-svg'
Vue.use(IconSvg)

Vue.config.productionTip = false

store.dispatch('appInit')
  .then(() => {
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
  })
  .catch(() => {})

Main ComponentApp.vue

<template>
  <div id="app">
    <!-- To solve the problem z-index Failure problem.--> 
    <div v-transfer-dom>
      <loading :show="appLoading"></loading>
    </div>
    <!-- On Routing Outer Pack keep-alive Used to cache components,Avoid multiple loads[search-list],Reduce performance consumption -->
    <keep-alive :include="['search-list']">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
  import { ViewBox, Tabbar, TabbarItem, Loading, TransferDom } from 'vux'
  // Mobile Click
  import FastClick from 'fastclick'

  export default {
    name: 'app',

    directives: {
      TransferDom
    },

    components: {
      ViewBox,
      Tabbar,
      TabbarItem,
      Loading,
      TransferDom
    },

    computed: {
      appLoading () {
        return this.$store.getters.appLoading
      }
    },

    mounted () {
      FastClick.attach(document.body)
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
</style>