Merge pull request #199 from lin-xin/dev

更新旧代码和依赖
2019-08-17 16:00:57 +08:00 · 2019-08-17 16:00:57 +08:00 · 21efb45431
parent d45bdbeeda f7fb309680
commit 21efb45431
9 changed files with 253 additions and 243 deletions
--- a/README.md
+++ b/README.md
@ -1,4 +1,5 @@
-# vue-manage-system #
+# vue-manage-system
+
 <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
  </a>
@ -15,56 +16,61 @@
    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
  </a>

-基于Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
+基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)

-本项目基于vue-cli3构建，如果是vue-cli2的请下载[旧版本V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
+本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)

 > React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)

 [English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)

-## 项目截图 ##
+## 项目截图
+
 ### 登录
+
 ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)

-### 默认皮肤 ###
+### 默认皮肤
+
 ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)

-### 浅绿色皮肤 ###
+### 浅绿色皮肤
+
 ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)

 ## 赞赏
+
 请作者喝杯咖啡吧！(微信号：linxin_20)

 ![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)

-## 前言 ##
-之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
+## 前言

-该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
-（已经升级到 vue-cli@3.2.3，请更新依赖）
+该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

-## 功能 ##
- [x] Element UI
- [x] 登录/注销
- [x] Dashboard
- [x] 表格
- [x] Tab选项卡
- [x] 表单
- [x] 图表 :bar_chart:
- [x] 富文本编辑器
- [x] markdown编辑器
- [x] 图片拖拽/裁剪上传
- [x] 支持切换主题色 :sparkles:
- [x] 列表拖拽排序
- [x] 权限测试
- [x] 404 / 403
- [x] 三级菜单
- [x] 自定义图标
- [x] 可拖拽弹窗
- [x] 国际化
+## 功能
+
+-   [x] Element UI
+-   [x] 登录/注销
+-   [x] Dashboard
+-   [x] 表格
+-   [x] Tab 选项卡
+-   [x] 表单
+-   [x] 图表 :bar_chart:
+-   [x] 富文本编辑器
+-   [x] markdown 编辑器
+-   [x] 图片拖拽/裁剪上传
+-   [x] 支持切换主题色 :sparkles:
+-   [x] 列表拖拽排序
+-   [x] 权限测试
+-   [x] 404 / 403
+-   [x] 三级菜单
+-   [x] 自定义图标
+-   [x] 可拖拽弹窗
+-   [x] 国际化
+
+## 安装步骤

-## 安装步骤 ##
 ```
 git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
 cd vue-manage-system    // 进入模板目录
@ -76,57 +82,57 @@ npm run serve
 // 执行构建命令，生成的dist文件夹放在服务器下即可访问
 npm run build
 ```
-## 组件使用说明与演示 ##

-### vue-schart ###
-vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
+## 组件使用说明与演示
+
+### vue-schart
+
+vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
+
 <p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>

 ```html
 <template>
    <div>
-        <schart  class="wrapper"
-				:canvasId="canvasId"
-				:type="type"
-				:data="data"
-				:options="options"
-		></schart>
+        <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
    </div>
 </template>
-	
+
 <script>
-    import Schart from 'vue-schart';        // 导入Schart组件
+    import Schart from 'vue-schart'; // 导入Schart组件
    export default {
-        data: function(){
+        data: function() {
            return {
-                canvasId: 'myCanvas',       // canvas的id
-                type: 'bar',                // 图表类型
+                canvasId: 'myCanvas', // canvas的id
+                type: 'bar', // 图表类型
                data: [
-                    {name: '2014', value: 1342},
-                    {name: '2015', value: 2123},
-                    {name: '2016', value: 1654},
-                    {name: '2017', value: 1795},
+                    { name: '2014', value: 1342 },
+                    { name: '2015', value: 2123 },
+                    { name: '2016', value: 1654 },
+                    { name: '2017', value: 1795 }
                ],
-                options: {                  // 图表可选参数
+                options: {
+                    // 图表可选参数
                    title: 'Total sales of stores in recent years'
                }
-            }
+            };
        },
        components: {
            Schart
        }
-    }
+    };
 </script>
 <style>
-.wrapper{
-	width: 7rem;
-	height: 5rem;
-}
+    .wrapper {
+        width: 7rem;
+        height: 5rem;
+    }
 </style>
 ```

-## 其他注意事项 ##
-### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
+## 其他注意事项
+
+### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？

 举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。

@ -136,14 +142,14 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
 {
    // 富文本编辑器组件
    path: '/editor',
-    component: resolve => require(['../components/page/VueEditor.vue'], resolve) 
+    component: resolve => require(['../components/page/VueEditor.vue'], resolve)
 },
 ```

 第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。

 第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
-	
+
 ```js
 {
 	index: 'editor',
@ -152,30 +158,29 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
 ```

 第四步：卸载该组件。执行以下命令：
-	
-	npm un vue-quill-editor -S
+npm un vue-quill-editor -S

 完成。

-### 二、如何切换主题色呢？ ###
+### 二、如何切换主题色呢？

 第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。

 ```javascript
-import 'element-ui/lib/theme-default/index.css';    // 默认主题
-// import '../static/css/theme-green/index.css';       // 浅绿色主题
+import 'element-ui/lib/theme-default/index.css'; // 默认主题
+// import './assets/css/theme-green/index.css';       // 浅绿色主题
 ```

 第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。

 ```javascript
-@import "../static/css/main.css";
-@import "../static/css/color-dark.css";     /*深色主题*/
-/*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
+@import "./assets/css/main.css";
+@import "./assets/css/color-dark.css";     /*深色主题*/
+/*@import "./assets/css/theme-green/color-green.css";   !*浅绿色主题*!*/
 ```

 第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。

 ## License

-[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
+[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-manage-system",
-  "version": "4.0.1",
+  "version": "4.1.0",
  "private": true,
  "scripts": {
    "dev": "npm run serve",
@ -16,13 +16,13 @@
    "vue-cropperjs": "^3.0.0",
    "vue-i18n": "^8.10.0",
    "vue-quill-editor": "^3.0.6",
-    "vue-router": "^3.0.1",
+    "vue-router": "^3.0.3",
    "vue-schart": "^1.0.0",
    "vuedraggable": "^2.17.0"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
-    "vue-template-compiler": "^2.5.21"
+    "@vue/cli-plugin-babel": "^3.9.0",
+    "@vue/cli-service": "^3.9.0",
+    "vue-template-compiler": "^2.6.10"
  }
 }
--- a/screenshots/wms2.png
+++ b/screenshots/wms2.png
--- a/src/assets/css/theme-green/fonts/element-icons.ttf
+++ b/src/assets/css/theme-green/fonts/element-icons.ttf
--- a/src/assets/css/theme-green/fonts/element-icons.woff
+++ b/src/assets/css/theme-green/fonts/element-icons.woff
--- a/src/assets/css/theme-green/index.css
+++ b/src/assets/css/theme-green/index.css
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@ -2,8 +2,8 @@
    <div class="header">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
-             <i v-if="!collapse" class="el-icon-s-fold"></i>
-             <i v-if="collapse" class="el-icon-s-unfold"></i>
+            <i v-if="!collapse" class="el-icon-s-fold"></i>
+            <i v-else class="el-icon-s-unfold"></i>
        </div>
        <div class="logo">后台管理系统</div>
        <div class="header-right">
@ -16,7 +16,11 @@
                </div>
                <!-- 消息中心 -->
                <div class="btn-bell">
-                    <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
+                    <el-tooltip
+                        effect="dark"
+                        :content="message?`有${message}条未读消息`:`消息中心`"
+                        placement="bottom"
+                    >
                        <router-link to="/tabs">
                            <i class="el-icon-bell"></i>
                        </router-link>
@ -24,11 +28,14 @@
                    <span class="btn-bell-badge" v-if="message"></span>
                </div>
                <!-- 用户头像 -->
-                <div class="user-avator"><img src="../../assets/img/img.jpg"></div>
+                <div class="user-avator">
+                    <img src="../../assets/img/img.jpg" />
+                </div>
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
-                        {{username}} <i class="el-icon-caret-bottom"></i>
+                        {{username}}
+                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <a href="http://blog.gdfengshuo.com/about/" target="_blank">
@ -37,7 +44,7 @@
                        <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
                            <el-dropdown-item>项目仓库</el-dropdown-item>
                        </a>
-                        <el-dropdown-item divided  command="loginout">退出登录</el-dropdown-item>
+                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
@ -45,142 +52,143 @@
    </div>
 </template>
 <script>
-    import bus from '../common/bus';
-    export default {
-        data() {
-            return {
-                collapse: false,
-                fullscreen: false,
-                name: 'linxin',
-                message: 2
+import bus from '../common/bus';
+export default {
+    data() {
+        return {
+            collapse: false,
+            fullscreen: false,
+            name: 'linxin',
+            message: 2
+        };
+    },
+    computed: {
+        username() {
+            let username = localStorage.getItem('ms_username');
+            return username ? username : this.name;
+        }
+    },
+    methods: {
+        // 用户名下拉菜单选择事件
+        handleCommand(command) {
+            if (command == 'loginout') {
+                localStorage.removeItem('ms_username');
+                this.$router.push('/login');
            }
        },
-        computed:{
-            username(){
-                let username = localStorage.getItem('ms_username');
-                return username ? username : this.name;
-            }
+        // 侧边栏折叠
+        collapseChage() {
+            this.collapse = !this.collapse;
+            bus.$emit('collapse', this.collapse);
        },
-        methods:{
-            // 用户名下拉菜单选择事件
-            handleCommand(command) {
-                if(command == 'loginout'){
-                    localStorage.removeItem('ms_username')
-                    this.$router.push('/login');
+        // 全屏事件
+        handleFullScreen() {
+            let element = document.documentElement;
+            if (this.fullscreen) {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitCancelFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
                }
-            },
-            // 侧边栏折叠
-            collapseChage(){
-                this.collapse = !this.collapse;
-                bus.$emit('collapse', this.collapse);
-            },
-            // 全屏事件
-            handleFullScreen(){
-                let element = document.documentElement;
-                if (this.fullscreen) {
-                    if (document.exitFullscreen) {
-                        document.exitFullscreen();
-                    } else if (document.webkitCancelFullScreen) {
-                        document.webkitCancelFullScreen();
-                    } else if (document.mozCancelFullScreen) {
-                        document.mozCancelFullScreen();
-                    } else if (document.msExitFullscreen) {
-                        document.msExitFullscreen();
-                    }
-                } else {
-                    if (element.requestFullscreen) {
-                        element.requestFullscreen();
-                    } else if (element.webkitRequestFullScreen) {
-                        element.webkitRequestFullScreen();
-                    } else if (element.mozRequestFullScreen) {
-                        element.mozRequestFullScreen();
-                    } else if (element.msRequestFullscreen) {
-                        // IE11
-                        element.msRequestFullscreen();
-                    }
+            } else {
+                if (element.requestFullscreen) {
+                    element.requestFullscreen();
+                } else if (element.webkitRequestFullScreen) {
+                    element.webkitRequestFullScreen();
+                } else if (element.mozRequestFullScreen) {
+                    element.mozRequestFullScreen();
+                } else if (element.msRequestFullscreen) {
+                    // IE11
+                    element.msRequestFullscreen();
                }
-                this.fullscreen = !this.fullscreen;
-            }
-        },
-        mounted(){
-            if(document.body.clientWidth < 1500){
-                this.collapseChage();
            }
+            this.fullscreen = !this.fullscreen;
+        }
+    },
+    mounted() {
+        if (document.body.clientWidth < 1500) {
+            this.collapseChage();
        }
    }
+};
 </script>
 <style scoped>
-    .header {
-        position: relative;
-        box-sizing: border-box;
-        width: 100%;
-        height: 70px;
-        font-size: 22px;
-        color: #fff;
-    }
-    .collapse-btn{
-        float: left;
-        padding: 0 21px;
-        cursor: pointer;
-        line-height: 70px;
-    }
-    .header .logo{
-        float: left;
-        width:250px;
-        line-height: 70px;
-    }
-    .header-right{
-        float: right;
-        padding-right: 50px;
-    }
-    .header-user-con{
-        display: flex;
-        height: 70px;
-        align-items: center;
-    }
-    .btn-fullscreen{
-        transform: rotate(45deg);
-        margin-right: 5px;
-        font-size: 24px;
-    }
-    .btn-bell, .btn-fullscreen{
-        position: relative;
-        width: 30px;
-        height: 30px;
-        text-align: center;
-        border-radius: 15px;
-        cursor: pointer;
-    }
-    .btn-bell-badge{
-        position: absolute;
-        right: 0;
-        top: -2px;
-        width: 8px;
-        height: 8px;
-        border-radius: 4px;
-        background: #f56c6c;
-        color: #fff;
-    }
-    .btn-bell .el-icon-bell{
-        color: #fff;
-    }
-    .user-name{
-        margin-left: 10px;
-    }
-    .user-avator{
-        margin-left: 20px;
-    }
-    .user-avator img{
-        display: block;
-        width:40px;
-        height:40px;
-        border-radius: 50%;
-    }
-    .el-dropdown-link{
-        color: #fff;
-        cursor: pointer;
-    }
-    .el-dropdown-menu__item{
-        text-align: center;
-    }
+.header {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 70px;
+    font-size: 22px;
+    color: #fff;
+}
+.collapse-btn {
+    float: left;
+    padding: 0 21px;
+    cursor: pointer;
+    line-height: 70px;
+}
+.header .logo {
+    float: left;
+    width: 250px;
+    line-height: 70px;
+}
+.header-right {
+    float: right;
+    padding-right: 50px;
+}
+.header-user-con {
+    display: flex;
+    height: 70px;
+    align-items: center;
+}
+.btn-fullscreen {
+    transform: rotate(45deg);
+    margin-right: 5px;
+    font-size: 24px;
+}
+.btn-bell,
+.btn-fullscreen {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    border-radius: 15px;
+    cursor: pointer;
+}
+.btn-bell-badge {
+    position: absolute;
+    right: 0;
+    top: -2px;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background: #f56c6c;
+    color: #fff;
+}
+.btn-bell .el-icon-bell {
+    color: #fff;
+}
+.user-name {
+    margin-left: 10px;
+}
+.user-avator {
+    margin-left: 20px;
+}
+.user-avator img {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+.el-dropdown-link {
+    color: #fff;
+    cursor: pointer;
+}
+.el-dropdown-menu__item {
+    text-align: center;
+}
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -1,30 +1,28 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import axios from 'axios';
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
 import ElementUI from 'element-ui';
 import VueI18n from 'vue-i18n';
 import { messages } from './components/common/i18n';
 import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
-// import '../static/css/theme-green/index.css';       // 浅绿色主题
+// import './assets/css/theme-green/index.css'; // 浅绿色主题
 import './assets/css/icon.css';
 import './components/common/directives';
-import "babel-polyfill";
+import 'babel-polyfill';

-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 Vue.use(VueI18n);
 Vue.use(ElementUI, {
    size: 'small'
 });
-Vue.prototype.$axios = axios;
-
 const i18n = new VueI18n({
    locale: 'zh',
    messages
-})
+});

 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
+    document.title = `${to.meta.title} | vue-manage-system`;
    const role = localStorage.getItem('ms_username');
    if (!role && to.path !== '/login') {
        next('/login');
@ -41,11 +39,10 @@ router.beforeEach((to, from, next) => {
            next();
        }
    }
-})
-
+});

 new Vue({
    router,
    i18n,
    render: h => h(App)
-}).$mount('#app')
+}).$mount('#app');
--- a/src/router/index.js
+++ b/src/router/index.js
@ -11,106 +11,106 @@ export default new Router({
        },
        {
            path: '/',
-            component: resolve => require(['../components/common/Home.vue'], resolve),
+            component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
            meta: { title: '自述文件' },
-            children:[
+            children: [
                {
                    path: '/dashboard',
-                    component: resolve => require(['../components/page/Dashboard.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Dashboard.vue'),
                    meta: { title: '系统首页' }
                },
                {
                    path: '/icon',
-                    component: resolve => require(['../components/page/Icon.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "icon" */ '../components/page/Icon.vue'),
                    meta: { title: '自定义图标' }
                },
                {
                    path: '/table',
-                    component: resolve => require(['../components/page/BaseTable.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "table" */ '../components/page/BaseTable.vue'),
                    meta: { title: '基础表格' }
                },
                {
                    path: '/tabs',
-                    component: resolve => require(['../components/page/Tabs.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "tabs" */ '../components/page/Tabs.vue'),
                    meta: { title: 'tab选项卡' }
                },
                {
                    path: '/form',
-                    component: resolve => require(['../components/page/BaseForm.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "form" */ '../components/page/BaseForm.vue'),
                    meta: { title: '基本表单' }
                },
                {
                    // 富文本编辑器组件
                    path: '/editor',
-                    component: resolve => require(['../components/page/VueEditor.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "editor" */ '../components/page/VueEditor.vue'),
                    meta: { title: '富文本编辑器' }
                },
                {
                    // markdown组件
                    path: '/markdown',
-                    component: resolve => require(['../components/page/Markdown.vue'], resolve),
-                    meta: { title: 'markdown编辑器' }    
+                    component: () => import(/* webpackChunkName: "markdown" */ '../components/page/Markdown.vue'),
+                    meta: { title: 'markdown编辑器' }
                },
                {
                    // 图片上传组件
                    path: '/upload',
-                    component: resolve => require(['../components/page/Upload.vue'], resolve),
-                    meta: { title: '文件上传' }   
+                    component: () => import(/* webpackChunkName: "upload" */ '../components/page/Upload.vue'),
+                    meta: { title: '文件上传' }
                },
                {
                    // vue-schart组件
                    path: '/charts',
-                    component: resolve => require(['../components/page/BaseCharts.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "chart" */ '../components/page/BaseCharts.vue'),
                    meta: { title: 'schart图表' }
                },
                {
                    // 拖拽列表组件
                    path: '/drag',
-                    component: resolve => require(['../components/page/DragList.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "drag" */ '../components/page/DragList.vue'),
                    meta: { title: '拖拽列表' }
                },
                {
                    // 拖拽Dialog组件
                    path: '/dialog',
-                    component: resolve => require(['../components/page/DragDialog.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "dragdialog" */ '../components/page/DragDialog.vue'),
                    meta: { title: '拖拽弹框' }
                },
                {
                    // 国际化组件
                    path: '/i18n',
-                    component: resolve => require(['../components/page/I18n.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "i18n" */ '../components/page/I18n.vue'),
                    meta: { title: '国际化' }
                },
                {
                    // 权限页面
                    path: '/permission',
-                    component: resolve => require(['../components/page/Permission.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "permission" */ '../components/page/Permission.vue'),
                    meta: { title: '权限测试', permission: true }
                },
                {
                    path: '/404',
-                    component: resolve => require(['../components/page/404.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "404" */ '../components/page/404.vue'),
                    meta: { title: '404' }
                },
                {
                    path: '/403',
-                    component: resolve => require(['../components/page/403.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "403" */ '../components/page/403.vue'),
                    meta: { title: '403' }
                },
                {
                    path: '/donate',
-                    component: resolve => require(['../components/page/Donate.vue'], resolve),
+                    component: () => import(/* webpackChunkName: "donate" */ '../components/page/Donate.vue'),
                    meta: { title: '支持作者' }
                }
            ]
        },
        {
            path: '/login',
-            component: resolve => require(['../components/page/Login.vue'], resolve)
+            component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue')
        },
        {
            path: '*',
            redirect: '/404'
        }
    ]
-})
+});