通用vue

router 配置

router.beforeEach((to, from, next )=>{ //路由过滤 跳转 定向// next() })

router.afterEach(route=> { 路由操作 })

store 配置

new Vuex.Store({ modules })

**模块话的形式 区分各个 脚本的 状态 **

`const files = require.context('.', false, /.js$/)

const modules = {}

files.keys().forEach(key => { if (key === './index.js') return modules[key.replace(/(./|.js)/g, '')] = files(key).default })

export default modules`

vue.config.js 配置

` const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

// const CompressionPlugin = require('compression-webpack-plugin'); // Gzip 只用在 开发阶段 const path = require('path') const isProd = process.env.NODE_ENV === 'production'

const cdn = {

  dev: {
    css: [],
    js: []
  },
  build: {
    css: [
      'https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css',
      'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css'
    ],
    js: [
      'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
      'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
      'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
      'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
      'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js'
    ]
  }

}

const externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'moment': 'moment', 'nprogress': 'NProgress' }

const resolve = dir => { return path.join(__dirname, dir) }

const vueSkeleton = new SkeletonWebpackPlugin({

webpackConfig: { entry: { app: resolve('./src/skeleton/entry-skeleton.js') } }, quiet: true, minimize: true, router: { mode: 'history', routes: [ { path: '/login', skeletonId: 'skeleton1' }, { path: '*', skeletonId: 'skeleton2' } ] } })

const pageSkeleton = new SkeletonPlugin({ pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址 staticDir: path.resolve(__dirname, './dist'), // 最好和 output.path 相同 routes: ['/login', '/total'], // 将需要生成骨架屏的路由添加到数组中 port: '8988' })

const plugins = [ // page-skeleton // pageSkeleton // vue-skeleton 骨架屏 vueSkeleton // new CompressionPlugin({ // 文件开启Gzip，也可以通过服务端(如：nginx)(github.com/webpack-con…) // filename: '[path].gz[query]', // algorithm: 'gzip', // test: new RegExp('\.(' + ['js', 'css'].join('|') + ')$'), // threshold: 8192, // minRatio: 0.8 // }) ]

if (!isProd) { plugins.push(new BundleAnalyzerPlugin()) }

module.exports = {

// baseUrl: BASE_URL,

// 如果不需要使用eslint，把lintOnSave设为false即可 lintOnSave: true,

chainWebpack: config => {

config.resolve.alias
  .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
  .set('pages', resolve('src/pages')) // key,value自行定义，比如.set('@@', resolve('src/components'))
  .set('common', resolve('src/components'))
  .set('utils', resolve('src/utils'))
  .set('mixins', resolve('src/mixins'))
config.module.rules.delete('svg')
config.module
  .rule('svg-sprite-loader')
  .test(/\.svg$/)
  .include
  .add(resolve('src/components/SvgIcon'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'icon-[name]'
  })
config.plugin('html').tap(args => {
  if (isProd) {
    args[0].cdn = cdn.build
  } else {
    args[0].cdn = cdn.dev
  }
  return args
})
// if (process.env.NODE_ENV !== 'development') {
//   config.plugin('html').tap(opts => {
//     opts[0].minify.removeComments = false
//     return opts
//   })
// }

// console.log(config, 'chainWebpack')
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');

},

// 打包时不生成.map文件

productionSourceMap: !isProd,

devServer: {

open: false,
port: 8083,
proxy: {
  '/develop': {
    
    target: '*******',
    // target: 'http://192.168.0.152:60000',
    ws: true,
    changeOrigin: true,
    pathRewrite: {
      '^/develop': ''
    }
  }
}

},

configureWebpack: {

externals: isProd ? externals : {},
// externals: {
//   'vue': 'Vue',
//   'vue-router': 'VueRouter',
//   'vuex': 'Vuex',
//   'axios': 'axios',
//   'moment': 'moment',
//   'nprogress': 'NProgress'
// },
plugins

},

css: {

// css拆分ExtractTextPlugin插件，默认true - 骨架屏需要为true
// 是否使用css分离插件 ExtractTextPlugin
// extract: true,
extract: isProd,
// 开启 CSS source maps?
sourceMap: !isProd,
// 启用 CSS modules for all css / pre-processor files.
modules: false

},

pwa: {

iconPaths: {
  favicon32: 'favicon.ico',
  favicon16: 'favicon.ico',
  appleTouchIcon: 'favicon.ico',
  maskIcon: 'favicon.ico',
  msTileImage: 'favicon.ico'
}

}

} `

axios 基本配置

import { baseUrl } from './config'

import axios from 'axios'

import { message } from 'ant-design-vue'

class HttpRequest {

  constructor(baseUrl = '') {
    this.baseUrl = baseUrl
  }
  getDefaultConfig() {
    const config = {
      baseURL: this.baseUrl,
      method: 'post',
      timeout: 30000,
      headers: {
        // 'Content-Type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }
    return config
}
  interceptors(instance, url) {
    instance.interceptors.request.use(config => {
        // bus.$loading.open()
        const token = localStorage.getItem('token')
         if (token) {
            config.headers.Authorization = 'Bearer ' + token.replace(/"/g, '')
        }
        // console.log(config)
        return config
    }, error => {
      // alert('error')
      return Promise.reject(error)
    })
    instance.interceptors.response.use(res => {
      // console.log(`response`)
      // console.log(res)
      if (res.status >= 200 && res.status < 300) {
        if (res.data.errcode === 2002) {
          message.warning(res.data.errmsg)
          bus.$emit('logout')
        }
        return res.data
      }
      return res
    }, err => {
      console.dir(err)
      if (err.message.indexOf('timeout') > -1) {
        // 判断请求异常信息中是否含有超时timeout字符串
        message.error('请求超时')
      }
      return err
    })
  }
  request(options) {
    const instance = axios.create()
    options = Object.assign(this.getDefaultConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
}

}

const service = new HttpRequest(baseUrl)

export default service

基本ajax调用 {

    /**
     * @description Object => formData
     * @param {*} data
     */
export const makeFormData = data => {
  const fd = new FormData()
  for (const key of Object.keys(data)) {
    fd.append(key, data[key])
  }
  return fd
}

export const getDataById = (url, data) => {
  return service.request({
    url: url + '/' + data,
    method: 'get'
  })
}

export const getData = (url, params) => {
  return service.request({
    url,
    params,
    method: 'get'
  })
}

export const getParams = (url, params) => {
  return service.request({
    url,
    params,
    method: 'get'
  })
}
export const postData = (url, data) => {
  return service.request({
    url,
    data
  })
}
export const uploadData = (url, data, method = 'post') => {
  // 如果是upload   数据应该是  formData 形式
  return service.request({
    url,
    method,
    data: makeFormData(data)
  })
}

export const postDataById = (url, id, data) => {
  return service.request({
    url: url + '/' + id,
    data
  })
}
export const deleteData = (url, id) => {
  return service.request({
    url: url + '/' + id,
    method: 'delete'
  })
}

export const deleteBindThird = (url, data) => {
  return service.request({
    url: url,
    data,
    method: 'delete'
  })
}

export const patchData = (url, data) => {
  return service.request({
    url,
    data,
    method: 'patch'
  })
}
export const putData = (url, data) => {
  return service.request({
    url,
    data,
    method: 'put'
  })
}
export const putDataById = (url, data) => {
  const { id } = data
  delete data.id
  return service.request({
    url: url + '/' + id,
    data,
    method: 'put'
  })
}
export const deleteDataById = (url, data) => {
  const { id } = data
  delete data.id
  return service.request({
    url: url + '/' + id,
    data,
    method: 'delete'
  })
}

export const downLoadFile = (url, data, method = 'post') => {
  return service.request({
    url,
    data,
    method,
    responseType: 'blob'
  })
}
export const getDownLoadFile = (url, params, method = 'get') => {
  return service.request({
    url,
    params,
    method,
    responseType: 'blob'
  })
}

}