Vue（三） 基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system 默认端口配置、路由、api接口配置、菜单页面等功能流程源码分析讲解

​

import vue from '@vitejs/plugin-vue'
import copy from 'rollup-plugin-copy'
 
const path = require('path')
console.log("path", path)
export default {
    base: './',
    plugins: [vue(), copy({
        // targets: [
        //     {src: './dist', dest: '../BackEnd_Service/template/'}, //执行拷贝
        //     // { src: './dist/assets', dest: '../BackEnd_Service/template/' }, //执行拷贝
        // ]
    })],
    server: {
        host: '0.0.0.0',
        port: '3000',        // 端口设置
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:80/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': 'http://127.0.0.1:80'
                    //这里的配置是正则表达式，以/api开头的将会被用用‘/api'替换掉，假如后台文档的接口是 /api/list/xxx
                    //前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx
                },
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    optimizeDeps: {
        include: ['schart.js']
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js'
        }
    },
    build: {
        rollupOptions: {
            external: [
                "wangEditor",
                "wangeditor",
            ],
        },
    },
}

{
    "name": "vue-manage-system",
    "version": "5.1.0",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && node ./build/copy.js",
        "serve": "vite preview"
    },
    "dependencies": {
        "axios": "^0.21.1",
        "echarts": "^5.4.0",
        "element-plus": "1.0.2-beta.52",
        "fs-extra": "^10.0.1",
        "js-file-download": "^0.4.12",
        "rollup-plugin-copy": "^3.4.0",
        "vue": "^3.1.2",
        "vue-cropperjs": "^5.0.0",
        "vue-i18n": "^9.0.0",
        "vue-router": "^4.0.10",
        "vue-schart": "^2.0.0",
        "vuex": "^4.0.2",
        "wangeditor": "^4.7.4"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^1.2.3",
        "@vue/compiler-sfc": "^3.1.2",
        "vite": "2.5.10"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ]
}

​

// 截取部分代码讲解
 children: [
            {
                path: "/dashboard",
                name: "dashboard",
                meta: {
                    title: '系统首页',
                    permiss: '1'
                },
                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/dashboard.vue")
            },
 
            {
            path: "/charts",
            name: "basecharts",
            meta: {
                title: '图表'
            },
            component: () =>
                import ( /* webpackChunkName: "charts" */ "../views/BaseCharts.vue")
            },
            ...
 
 ]

import request from '../utils/request';
 
 
// public文件夹下本地静态文件数据
export const fetchData = () => {
    return request({
        url: './table.json',
        method: 'get'
    });
};
 
 
// 服务器接口数据
export const projectAdd = query => {
    console.log("value",query)
    return request({
        url: '/api/project/add/',
        //url: '/api/project/add/',
        method: 'post',
        data: query
    });
};

// 截取部分代码演示
export default {
  setup() {
    const items = [
      {
        icon: "el-icon-lx-home",
        index: "/dayReport",
        title: "系统首页",
      },
    ]

​