危险

为之则易，不为则难

0%

10_人资后台

发表于 更新于

✔ 掌握 echarts 的基本使用。

✔ 了解项目打包上线的基本流程。

首页-echarts图表的应用

基础面积图

  1. 安装 echarts 包。
1
npm i echarts
  1. 放置两个图表的 div，并给定高宽，src/views/dashboard/index.vue。
1
2
3
4
5
6
7
8
<div class="chart">
    <!-- 图表 -->
    <div ref="social" style=" width: 100%; height:100% " />
</div>
<div class="chart">
    <!-- 图表 -->
    <div ref="provident" style=" width: 100%; height:100% " />
</div>
  1. 在 mounted 中初始化图表， src/views/dashboard/index.vue。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import CountTo from 'vue-count-to'
import {
    mapGetters
} from 'vuex'
import {
    getHomeData,
    getMessageList
} from '@/api/home'
// #1
import * as echarts from 'echarts'
export default {
    components: {
        CountTo
    },
    data() {
        return {
            homeData: {},
            list: []
        }
    },
    computed: {
        ...mapGetters(['name', 'avatar', 'company', 'departmentName'])
    },
    watch: {
        // #3
        homeData() {
            this.social.setOption({
                xAxis: {
                    type: 'category',
                    // https://echarts.apache.org/zh/option.html#xAxis.boundaryGap
                    // 坐标轴两边的空白策略
                    boundaryGap: false,
                    data: this.homeData.socialInsurance?.xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.homeData.socialInsurance?.yAxis,
                    type: 'line',
                    areaStyle: {
                        color: '#04c9be' // 填充颜色
                    },
                    lineStyle: {
                        color: '#04c9be' // 线的颜色
                    }
                }]
            })
            this.provident.setOption({
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.homeData.providentFund?.xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.homeData.providentFund?.yAxis,
                    type: 'line',
                    areaStyle: {
                        color: '#04c9be' // 填充颜色
                    },
                    lineStyle: {
                        color: '#04c9be' // 线的颜色
                    }
                }]
            })
        }
    },
    created() {
        this.getHomeData()
        this.getMessageList()
    },
    // #2
    mounted() {
        this.social = echarts.init(this.$refs.social)
        this.provident = echarts.init(this.$refs.provident)
    },
    methods: {
        async getHomeData() {
            this.homeData = await getHomeData()
        },
        async getMessageList() {
            this.list = await getMessageList()
        }
    }
}

首页-echarts图表的按需导入

echarts 图表的按需导入， src/views/dashboard/index.vue。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 引入核心包，注意这儿是从 'echarts/core' 引入的
import * as echarts from 'echarts/core'
// 引入折线图
import {
    LineChart
} from 'echarts/charts'
// 引入组件
import {
    GridComponent
} from 'echarts/components'
import {
    CanvasRenderer
} from 'echarts/renderers'
echarts.use([
    LineChart,
    GridComponent,
    CanvasRenderer
])

路由模式-将路由改成history模式

  • hash模式带#，#后面的地址变化不会引起页面的刷新

  • history没有#，地址变化会引起页面刷新，更符合页面地址的规范（开发环境不刷新-webpack配置）

  • 将路由模式修改成history模式，src/router/index.js

1
2
3
4
5
6
7
const createRouter = () => new Router({
    mode: 'history', // require service support
    scrollBehavior: () => ({
        y: 0
    }),
    routes: constantRoutes // 默认引入静态路由
})

打包分析-分析

打包分析代码。

1
npm run preview -- --report

CDN加速

将几个比较大的多在打包时排除，这样可以缩小整体打包的大小，保证 js 的加载速度，排除的包采用 cdn 的方式用外链去引入，cdn 本名为分发服务器，意为更近的访问区间更快的访问速度将所需要的文件返回给客户端。

  1. webpack 排除打包， vue.config.js。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
        alias: {
            '@': resolve('src')
        }
    },
    // 配置需要排出的包
    externals: {
        'vue': 'Vue',
        'element-ui': 'ELEMENT',
        'cos-js-sdk-v5': 'COS'
    }
},
  1. 在 html 中采用外链引入排除的文件， public/index.html。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
</head>

<body>
    <noscript>
        <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>

</body>

</html>

项目打包-安装nginx

  1. 执行打包命令，得到 dist 文件包。
1
npm run build:prod
  1. 安装 nginx，双击 nginx.exe 启动服务。
  1. windows 下停止服务。
1
2
./nginx -s stop
# ./nginx -s quit # 等待处理完毕，优雅停止

  1. 把 dist 中的代码放到 html 目录下。

  2. 清空 Cookie，浏览器地址栏输入 http://localhost/login。

nginx解决history的404问题

修改 windows 配置文件，conf/nginx.conf。

1
2
3
4
location / {
    # 设置不论请求什么地址，都返回 index.html
    try_files $uri $uri/ /index.html;
}

重启服务。

1
./nginx -s reload

nginx配置代理解决生产环境跨域问题

nginx解决生产环境跨域

修改配置文件

1
2
3
location /prod-api  {
  proxy_pass https://heimahr-t.itheima.net;
}

windows重启服务

1
./nginx -s reload