Vue

环境

# .env.development
ENV = 'development'
# .env.production
ENV = 'production'
# 接口地址
VUE_APP_BASE_API  = 'http://11111'

main

import { createApp } from "vue"
import jsCookie from "js-cookie"
import App from "./App.vue"
import router from "./router"
import store from "./assets/js/store"
// elementUI
import ElementPlus from "element-plus"
import "element-plus/theme-chalk/index.css"
// 重置全局样式
import "./assets/css/reset.css"
// 全局组件
import component from "./assets/js/component"
const app = createApp(App)
// 接口
import Http from "./assets/js/fetch"
// 挂载全局
app.config.globalProperties.$Cookie = jsCookie
app.config.globalProperties.$Http = Http
app.use(store).use(router)
app.use(ElementPlus).use(component)
app.mount("#app")

vue.config.js

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  outputDir: 'dist',
  publicPath: '/',
  productionSourceMap: false,
  runtimeCompiler: true,
  devServer: {
    port: 1122,
    open: true,
    disableHostCheck:true //webpack4.0 开启热更新
  },
  configureWebpack:config=> {
    config.plugin('CompressionPlugin').use(
      new CompressionPlugin({
        filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
        algorithm: 'gzip', // 使用gzip压缩
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'), // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8 // 压缩率小于0.8才会压缩
      })
    )
  }
}

Home页面

<template>
  <el-container>
    <el-aside width="200px">{{name}}</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>
<script>
import { computed, reactive, toRefs, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
export default {
  name: "home",
  setup () {
    const store = useStore()
    const { proxy } = getCurrentInstance()
    const state = reactive({
      name: computed(() => store.state.login.name),
    })
    let params = {
      username: 'admin',
      password: '123456',
    }
    proxy.$Http.get("/xx", { params }).then((result) => {
      console.log(result)
    })
    return { ...toRefs(state) }
  }
}
</script>
<style lang="scss" scoped>
</style>

全局路由

import { createRouter, createWebHistory } from "vue-router"
import Cookies from "js-cookie"
const routes = [
  {
    path: "/",
    name: "home",
    component: () => import(/* webpackChunkName: "home" */ "../views/home")
  },
  {
    path: "/login",
    name: "login",
    component: () => import(/* webpackChunkName: "login" */ "../views/login")
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
  let isAuthenticated = Cookies.get("isAuthenticated")
  if (to.name !== "login" && isAuthenticated) next({ name: "login" })
  else next()
})
export default router

全局组件

const modulesFiles = require.context("@/components", true, /.vue$/)
const comps = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^.\/(.*)\.vue/, "$1")
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const subGroup = {
  install: (Vue) => {
    for (const [key, val] of Object.entries(comps)) {
      Vue.component(key, val)
    }
  }
}
export default subGroup
// require 自动引入实现
const files = require.context('.', false, /\.ts$/);
const modules = {};
files.keys().forEach((key) => {
     if (key === './index.ts') { return; }
     modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default;
});
export default modules;
// import 自动引入实现
const files = import.meta.globEager("./*.ts")
const modules: any = {};
for (const key in files) {
    if (Object.prototype.hasOwnProperty.call(files, key)) {
        modules[key.replace(/(\.\/|\.ts)/g, '')] = files[key].default
    }
}
export default modules;

Axios封装

import axios from "axios"
const Http = axios.create({
  timeout: 5000,
  baseURL: process.env.VUE_APP_BASE_API,
  headers: { "Content-Type": "application/json" }
})
// 请求拦截器
Http.interceptors.request.use(
  (config) => {
    // do something...
    return config
  },
  (error) => Promise.reject(error)
)
// 响应拦截器
Http.interceptors.response.use(
  (response) => {
    // do something...
    return response
  },
  (error) => Promise.reject(error)
)
export default Http

Vuex 引入

import { createStore } from "vuex"
const modulesFiles = require.context("@/store", true, /.js$/)
const comps = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^.\/(.*)\.js/, "$1")
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
export default createStore({ comps })

store模板

const state = {}
const actions = {}
const mutations = {}
export default {
  namespaced: true,
  state,
  actions,
  mutations
}

// router.js 文件
// 不需要权限的路由
export const constantRouterMap = [
    {
        path: '/login',
        component: () => import('@/views/login/index'),
        hidden: true
    },
    {
        path: '/404',
        component: () => import('@/views/404'),
        hidden: true
     },
    {
        path: '*',
        redirect: '/404',
        hidden: true
    }
]
const createRouter = () => new Router({
  mode: "history",
  routes: constantRouterMap
});
const router = createRouter();
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher;
}
export default router;
// 在 addRoutes的地方
import {resetRouter} from '@/router'
// 先重置，然后再添加
resetRouter()
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表