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 = config3. 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 = false
store.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">
<div v-transfer-dom>
<loading :show="appLoading">loading>
div>
<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>