fix

package.json

@@ -6,10 +6,10 @@
     "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build-dev": "vue-cli-service build --mode development --dest dist-dev",
+    "preview": "node build/index.js --preview",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "svgo": "svgo -f src/assets/icons",
+    "svgo": "svgo -f src/assets/icons"
-    "new": "plop"
   },
   "dependencies": {
     "animate.css": "^4.1.1",
@@ -39,6 +39,7 @@
     "@vue/cli-service": "^4.5.8",
     "babel-eslint": "^10.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
+    "script-ext-html-webpack-plugin": "^2.1.5",
     "eslint": "^7.12.1",
     "eslint-plugin-vue": "^7.1.0",
     "html-webpack-plugin": "^4.5.0",

src/assets/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('SvgIcon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)

src/assets/icons/svgo.yml

@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'

src/assets/styles/element-ui.scss

@@ -1,75 +0,0 @@
-// cover some element-ui styles
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-    font-weight: 400 !important;
-}
-.el-upload {
-    input[type="file"] {
-        display: none !important;
-    }
-}
-.el-upload__input {
-    display: none;
-}
-.cell {
-    .el-tag {
-        margin-right: 0;
-    }
-}
-.small-padding {
-    .cell {
-        padding-left: 5px;
-        padding-right: 5px;
-    }
-}
-.fixed-width {
-    .el-button--mini {
-        padding: 7px 10px;
-        min-width: 60px;
-    }
-}
-.status-col {
-    .cell {
-        padding: 0 10px;
-        text-align: center;
-        .el-tag {
-            margin-right: 0;
-        }
-    }
-}
-
-// to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-    transform: none;
-    left: 0;
-    position: relative;
-    margin: 0 auto;
-}
-
-// refine element ui upload
-.upload-container {
-    .el-upload {
-        width: 100%;
-        .el-upload-dragger {
-            width: 100%;
-            height: 200px;
-        }
-    }
-}
-
-// dropdown
-.el-dropdown-menu {
-    a {
-        display: block;
-    }
-}
-
-// fix date-picker ui bug in filter-item
-.el-range-editor.el-input__inner {
-    display: inline-flex !important;
-}
-
-// to fix el-date-picker css style
-.el-range-separator {
-    box-sizing: content-box;
-}

src/assets/styles/form/home.scss

@@ -1,4 +1,4 @@
-@import '../resources/element-variables';
+@import '../resources/variables';
 $selectedColor: rgba(24, 144, 255, 0.05);
 $lighterBlue: #1890ff;
 .form-edit-container {

src/assets/styles/form/index.scss

@@ -1,4 +1,4 @@
-@import '../resources/element-variables';
+@import '../resources/variables';
 $editorTabsborderColor: #121315;
 body,
 html {

src/assets/styles/index.scss

@@ -1,9 +1,6 @@
-@import './resources/variables';
 @import './mixin.scss';
 @import './transition.scss';
-@import './element-ui.scss';
 @import './btn.scss';
-@import "./resources/element-variables";
 body {
     height: 100%;
     margin: 0;

src/assets/styles/resources/element-variables.scss

@@ -1,32 +0,0 @@
-/**
-* I think element-ui's default theme color is too light for long-term use.
-* So I modified the default color and you can modify it to your liking.
-**/
-
-/* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
-
-$--button-font-weight: 400;
-
-// $--color-text-regular: #1f2d3d;
-
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
-
-$--table-border: 1px solid #dfe6ec;
-
-$--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-/* icon font path, required */
-$--font-path: "~element-ui/lib/theme-chalk/fonts";
-@import "../../../../node_modules/element-ui/packages/theme-chalk/src/index";
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-    theme: $--color-primary;
-}

src/assets/styles/resources/variables.scss

@@ -21,9 +21,35 @@ $subMenuHover: #001528;
 
 $sideBarWidth: 210px;
 
+
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+$--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
+    theme: $--color-primary;
     menutext: $menuText;
     menuactivetext: $menuActiveText;
     submenuactivetext: $subMenuActiveText;

src/main.js

@@ -7,15 +7,17 @@ import meta from 'vue-meta'
 import dayjs from 'dayjs'
 import Cookies from 'js-cookie'
 import router from './router/index'
-import animated from 'animate.css'
+
 import api from './api'
 import store from './store/index'
 import '@/assets/styles/index.scss' // global css
 import '@/utils/plugins'
+import './assets/icons' // icon
 // 全局组件自动注册
 import '@/components/autoRegister'
 import VueClipboard from 'vue-clipboard2'
 import Process from '@/components/HandleProcess/process'
+
 Vue.prototype.$api = api
 Vue.prototype.$dayjs = dayjs
 Vue.prototype.$store = store
@@ -36,12 +38,6 @@ Vue.prototype.$process = Process
 Vue.use(VueClipboard)
 Vue.use(meta)
 Vue.use(Element, {size: 'small', zIndex: 3000})
-Vue.use(animated)
-
-// 自动加载 svg 图标
-const req = require.context('./assets/icons', false, /\.svg$/)
-const requireAll = requireContext => requireContext.keys().map(requireContext)
-requireAll(req)
 
 Vue.config.productionTip = false
 

src/views/404.vue

@@ -23,7 +23,7 @@ export default {
     justify-content: center;
     justify-items: center;
     .title {
-        color: $--color-primary;
+        color: #1890ff;
         font-size: 84px;
         text-align: left;
     }

src/views/account/login/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="login-container">
         <div class="logo-banner">
-            <img src="@/assets/images/logo_banner.png">
+            <img src="https://qiniu.smileyi.top/logo_banner.png">
         </div>
         <div class="logo-content">
             <span class="hello">Hello ，</span>
@@ -98,7 +98,7 @@ export default {
         }
         return {
             formType: 'login',
-            loginType: 'account',
+            loginType: 'wx',
             agreeProtocol: '',
             accountLoginRules: {
                 account: [

src/views/form/statistics/filter.vue

@@ -112,6 +112,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/assets/styles/resources/variables.scss";
 .filter-left {
   border-right: 1px solid #dcdfe6;
 

src/views/form/statistics/public.vue

@@ -154,7 +154,7 @@ export default {
     }
 }
 .el-main {
-    background-color: $backgroundColor;
+    background-color: rgba(247, 247, 247, 90);
     height: calc(100vh - 60px);
 }
 @media screen and (max-width: 750px) {

src/views/home/index.vue

@@ -153,6 +153,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$menuActiveText: #409eff;
+
 .home-container {
     background-color: rgba(247, 247, 247, 90);
     display: flex;

src/views/official/index.vue

@@ -2,7 +2,7 @@
     <div class="official-container">
         <div class="header-container">
             <div class="background">
-                <img src="@/assets/images/official/background.svg">
+                <img src="https://qiniu.smileyi.top/background.svg">
             </div>
             <div id="headerNav" :class="{'is-fixed' : isFixed}" class="top-header">
                 <img class="logo" src="@/assets/images/official/TDUCK@2x.png" @click="$router.push({path:'/'})">
@@ -36,7 +36,7 @@
                     <el-button @click="$router.push({path:'/home'})">立即体验</el-button>
                 </div>
                 <div class="right">
-                    <img src="@/assets/images/official/banner2.png">
+                    <img src="https://qiniu.smileyi.top/banner2.png">
                 </div>
             </div>
         </div>
@@ -56,13 +56,13 @@
                     <p> 无需编程，拖拽可视化模板或组件，即可生成精美问卷</p>
                 </div>
             </div>
-            <img class="img1" src="@/assets/images/official/desc1.png">
+            <img class="img1" src="https://qiniu.smileyi.top/desc1.png">
         </div>
         <p class="title">我们的解决方案</p>
         <div class="solutions">
             <div class="solution-item">
                 <p class="title">客户体验</p>
-                <img src="@/assets/images/official/solution1.png">
+                <img src="https://qiniu.smileyi.top/solution1.png">
                 <p class="desc">客户满意度 宾馆服务满意度 </p>
                 <p class="desc"> 餐厅满意度调查 公共服务满意度</p>
                 <p class="desc">旅游服务满意度 经销商满意度 </p>
@@ -70,7 +70,7 @@
             </div>
             <div class="solution-item">
                 <p class="title">市场调研</p>
-                <img src="@/assets/images/official/solution2.png">
+                <img src="https://qiniu.smileyi.top/solution2.png">
                 <p class="desc">餐饮市场调查 手机市场调查 </p>
                 <p class="desc"> 培训市场调查 消费者调查 </p>
                 <p class="desc">APP市场调查 女性消费者偏好调查 </p>
@@ -78,7 +78,7 @@
             </div>
             <div class="solution-item">
                 <p class="title">报名登记</p>
-                <img src="@/assets/images/official/solution3.png">
+                <img src="https://qiniu.smileyi.top/solution3.png">
                 <p class="desc">才艺比赛报名 粉丝活动报名 </p>
                 <p class="desc"> 聚餐出游报名 活动/会务微信报名 </p>
                 <p class="desc"> 讲座公开课报名 商品订单 </p>
@@ -87,7 +87,7 @@
         </div>
         <div class="use-company">
             <p class="title">他们都在使用</p>
-            <img src="@/assets/images/official/use-commony.png">
+            <img src="https://qiniu.smileyi.top/use-commony.png">
         </div>
         <div class="footer">
             <div class="top">
@@ -137,7 +137,7 @@
 
 <script>
 import store from '@/store'
-
+import 'animate.css'
 export default {
     name: 'Official',
     data() {

src/views/official/oldIndex.vue

@@ -1,133 +0,0 @@
-<template>
-    <div class="official-container">
-        <div class="header-container">
-            <el-row type="flex" align="middle">
-                <el-col class="header-col" :span="3" :offset="6">
-                    <img src="@/assets/images/indexLogo.png" class="header-logo" @click="$router.push({path:'/home'})">
-                </el-col>
-                <el-col class="header-col" :span="6" :offset="1">
-                    <el-menu :default-active="menuIndex" mode="horizontal"
-                             text-color="#205BB5"
-                             active-text-color="#205BB5"
-                             @select="activeMenuHandle"
-                    >
-                        <el-menu-item v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath"
-                                      :route="item.routerPath" class="menu-item"
-                        >
-                            {{ item.title }}
-                        </el-menu-item>
-                    </el-menu>
-                </el-col>
-                <el-col class="header-col" :span="3">
-                    <el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button>
-                    <el-button v-if="!isLogin&&this.$route.path!='/login' " class="header-btn"
-                               @click="$router.push({path:'/login'})"
-                    >
-                        登 录
-                    </el-button>
-                </el-col>
-            </el-row>
-        </div>
-        <div class="main-container">
-            <router-view />
-        </div>
-    </div>
-</template>
-<script>
-import store from '@/store/index.js'
-import {checkIsUrl, openUrl} from '@/utils'
-
-export default {
-    name: 'Official',
-    data() {
-        return {
-            menuIndex: null,
-            menuRouters: [
-                {
-                    routerPath: '/',
-                    title: '首页'
-                },
-                {
-                    routerPath: 'https://gitee.com/TDuckApp/tduck-platform/issues',
-                    title: '提出建议'
-                },
-                {
-                    routerPath: 'https://gitee.com/TDuckApp/tduck-platform?time=2',
-                    title: '开源版本'
-                }
-            ]
-        }
-    },
-    computed: {
-        getStore() {
-            return store
-        },
-        isLogin() {
-            return this.getStore.getters['user/isLogin']
-        }
-    },
-    watch: {
-        $route(to) {
-            this.menuIndex = to.path
-        }
-    },
-    mounted() {
-        this.menuIndex = this.$route.path
-    }, methods: {
-        activeMenuHandle(routerPath) {
-            if (checkIsUrl(routerPath)) {
-                openUrl(routerPath)
-            } else {
-                this.menuIndex = routerPath
-            }
-        }
-    }
-}
-</script>
-<style scoped>
-.official-container {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-}
-.header-container {
-    background-color: white;
-    width: 100%;
-    min-width: 960px;
-    top: 0;
-    height: 102px;
-    z-index: 100;
-}
-.main-container {
-    height: calc(100vh - 102px);
-}
-.header-container .header-col .el-menu--horizontal {
-    border: none;
-}
-.header-logo {
-    cursor: pointer;
-    width: 175px;
-}
-.menu-item {
-    line-height: 90px;
-    height: 90px;
-    font-size: 16px;
-    font-weight: 900;
-    position: relative;
-    left: 200px;
-}
-.header-btn {
-    margin: 35px 0 35px 20px;
-    float: right;
-    color: #205bb5;
-    border-color: #205bb5;
-}
-.header-btn:focus,
-.header-btn:hover {
-    border-color: #205bb5;
-    color: #205bb5;
-}
-.view_container_content p {
-    color: #205bb5;
-}
-</style>

vue.config.js

@@ -1,8 +1,14 @@
 const path = require('path')
-const terserPlugin = require('terser-webpack-plugin')
+
+const name = process.env['VUE_APP_TITLE ']
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
 
 module.exports = {
   publicPath: '/',
+  lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
     disableHostCheck: true,
@@ -16,47 +22,41 @@ module.exports = {
       }
     }
   },
-    configureWebpack: config => {
+  configureWebpack: {
-        config.resolve.modules = ['node_modules']
+    // provide the app's title in webpack's name field, so that
-        config.resolve.alias = {
+    // it can be accessed in index.html to inject the correct title.
-            '@': path.resolve(__dirname, 'src')
+    name: name,
-        }
+    resolve: {
-        config.optimization = {
+      alias: {
-            minimizer: [
+        '@': resolve('src')
-                //https://webpack.docschina.org/plugins/terser-webpack-plugin/
-                new terserPlugin({
-                    terserOptions: {
-                        compress: {
-                            warnings: false,
-                            drop_console: true,
-                            drop_debugger: true,
-                            pure_funcs: ['console.log']
-                        }
       }
-                })
-            ]
     }
   },
-    chainWebpack: config => {
+  chainWebpack(config) {
-        const oneOfsMap = config.module.rule('scss').oneOfs.store
+    // it can improve the speed of the first screen, it is recommended to turn on preload
-        oneOfsMap.forEach(item => {
+    // it can improve the speed of the first screen, it is recommended to turn on preload
-            item.use('sass-resources-loader')
+    config.plugin('preload').tap(() => [
-                .loader('sass-resources-loader')
+      {
-                .options({
+        rel: 'preload',
-                    resources: [
+        // to ignore runtime.js
-                        './src/assets/styles/resources/*.scss',
+        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-                    ]
+        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-                })
+        include: 'initial'
-                .end()
+      }
-        })
+    ])
+
+    // when there are many pages, it will cause too many meaningless requests
+    config.plugins.delete('prefetch')
+
+    // set svg-sprite-loader
     config.module
       .rule('svg')
-            .exclude.add(path.join(__dirname, 'src/assets/icons'))
+      .exclude.add(resolve('src/assets/icons'))
       .end()
     config.module
       .rule('icons')
       .test(/\.svg$/)
-            .include.add(path.join(__dirname, 'src/assets/icons'))
+      .include.add(resolve('src/assets/icons'))
       .end()
       .use('svg-sprite-loader')
       .loader('svg-sprite-loader')
@@ -72,5 +72,44 @@ module.exports = {
       })
       .end()
 
+    config
+      .when(process.env.NODE_ENV !== 'development',
+        config => {
+          config
+            .plugin('ScriptExtHtmlWebpackPlugin')
+            .after('html')
+            .use('script-ext-html-webpack-plugin', [{
+              // `runtime` must same as runtimeChunk name. default is `runtime`
+              inline: /runtime\..*\.js$/
+            }])
+            .end()
+          config
+            .optimization.splitChunks({
+            chunks: 'all',
+            cacheGroups: {
+              libs: {
+                name: 'chunk-libs',
+                test: /[\\/]node_modules[\\/]/,
+                priority: 10,
+                chunks: 'initial' // only package third parties that are initially dependent
+              },
+              elementUI: {
+                name: 'chunk-elementUI', // split elementUI into a single package
+                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+              },
+              commons: {
+                name: 'chunk-commons',
+                test: resolve('src/components'), // can customize your rules
+                minChunks: 3, //  minimum common number
+                priority: 5,
+                reuseExistingChunk: true
+              }
+            }
+          })
+          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
+          config.optimization.runtimeChunk('single')
+        }
+      )
   }
 }