vue2 项目构建 （上）

项目结构Config

1. dev.env.js

开发环境配置：

'use strict'// 合并配置const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {  CONF_ENV: `"${process.env.CONF_ENV}"`,  NODE_ENV: '"development"',  // 接口地址  API_HOST: {    workreport: '"/api_workreport"',    file: '"http://pps.banggood.cn:8083"',    wx_gateway: '"http://pps.banggood.cn:8099"'  }})

2. prod.env.js

生产环境配置：

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  }}

项目Src

这里想先介绍一下项目所涉及到的一些工具utils：

1. apiFetch.js

这里的apifetch是基于axios封装的一套接口调用插件

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

// 暴露出来一些方法，以及需要的参数export function getReportTemplate ({beginDate, endDate, reportDateType, reportType} = {}) {  return apiFetch({    url: '/report/template/getReportTemplate',    method: 'post',    data: {      eqBeginDate: beginDate,      eqEndDate: endDate,      eqReportDateType: reportDateType,      eqReportType: reportType    }  })}/* 然后从不同文件路径import {getReportTemplate} 使用*/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

时间选择与格式化时间功能，思路是先做成年，转化成周，然后周赋值到月，定位当前周

/** * 获取整年的星期四 * @param year 传入如  2017 * @returns {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

上传与下载文件功能, 返回值false无法操作

// 控制文件的大小--单位 MB  const fileSize = file.size / 1024 / 1024  if (fileSize > 100) {    Vue.$vux.toast.show({      type: 'cancel',      text: '文件大小不能超过 100MB ！'    })    return false  }

// 控制上传文件的格式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'  ]

入口文件 main.js

初始化vue实例并使用需要的插件。
注：这里store,IconSvg引用是用的‘@/…’

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

主组件 app.vue

所有页面，路由，组件都是在App.vue下进行切换的

<template>  <div id="app">    <!-- 以解决其带来的 z-index 失效问题。-->     <div v-transfer-dom>      <loading :show="appLoading"></loading>    </div>    <!-- 在路由外层包keep-alive用来缓存组件,避免多次加载[search-list],减少性能消耗 -->    <keep-alive :include="['search-list']">      <router-view/>    </keep-alive>  </div></template><script>  import { ViewBox, Tabbar, TabbarItem, Loading, TransferDom } from 'vux'  // 手机端点击  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>