vue-cli项目中，通过cdn方式引入vchart来解决打包过大问题

一键写代码

已于 2022-04-11 18:04:58 修改

阅读量1.2k

点赞数 1

分类专栏： vue 前端技术积累移动端文章标签： vue.js 前端

于 2022-04-11 17:29:53 首次发布

本文链接：https://blog.csdn.net/qq_42991509/article/details/124104475

版权

前端技术积累同时被 3 个专栏收录

160 篇文章 9 订阅

订阅专栏

vue

89 篇文章 7 订阅

订阅专栏

移动端

35 篇文章 1 订阅

订阅专栏

1、在index.html中，引入v-charts的cdn地址。
因为v-charts 依赖echarts，所有，两者都需要引入。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  <link rel="stylesheet" type="text/css" href="../../static/styles/css/app.css" />
  <title></title>
  
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/line.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">


</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

2、在webpack配置一下： vue-cli 3.x 或4.x版本，找vue.config.js

module.exports = {

configureWebpack: config => {
config[‘externals’] = {
echarts: ‘echarts’,
VCharts: ‘VeIndex’
}
},

需要注意的是，VCharts对应的名字是VeIndex。

通过cdn引入后，vcharts就会在全局window上挂载VeIndex

3、在使用图表组件的页面引入和注册组件。

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
const VeIndex = window.VeIndex
export default {
  name: 'planWorkbench',
  components: {
    veLine: VeIndex.VeLine
  },
  data() {
    return {
      chartData: {
        columns: ['日期', '销售额'],
        rows: [
          { 日期: '1月1日', 销售额: 123 },
          { 日期: '1月2日', 销售额: 1223 },
          { 日期: '1月3日', 销售额: 2123 },
          { 日期: '1月4日', 销售额: 4123 },
          { 日期: '1月5日', 销售额: 3123 },
          { 日期: '1月6日', 销售额: 7123 }
        ]
      }
    }
  },
  mounted() {}
}
</script>

<style></style>

进阶：

更进一步，我们把cdn配置放置到vue.config.js中，替换indexhtml中的手动配置文件。

index.html中，我们采用根据配置输出。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  <link rel="stylesheet" type="text/css" href="../../static/styles/css/app.css" />
  <title></title>
  <!-- cdn css -->
  <% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
  <% } %>
  <!-- cdn js -->
  <% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
  <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

在vue.config.js中修改配置：

 // vue.config.js
 const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置cdn
const cdn = {
  css: ['https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css'],
  js: [
    'https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js',
    'https://cdn.jsdelivr.net/npm/v-charts/lib/line.min.js'
  ]
}
module.exports = {
  publicPath: "./", // 项目部署的基础路径
  outputDir: "dist",
    configureWebpack: config => {
    config.plugins.forEach(val => {
      if (val instanceof HtmlWebpackPlugin) {
        // 修改HtmlWebpackPlugin，添加env表示生产或开发的环境参数，在index.html使用环境变量
        val.options.env = process.env.NODE_ENV
        val.options.cdn = cdn // cdn配置
      }
    })
    // cdn配置
    config['externals'] = {
      echarts: 'echarts',
      VCharts: 'VeIndex'
    }
  },
  
};

一键写代码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue-cli项目中，通过cdn方式引入vchart来解决打包过大问题

1、在index.html中，引入v-charts的cdn地址。因为v-charts 依赖echarts，所有，两者都需要引入。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
复制链接

扫一扫