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中修改配置：
const HtmlWebpackPlugin = require('html-webpack-plugin') 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) { val.options.env = process.env.NODE_ENV val.options.cdn = cdn } }) config['externals'] = { echarts: 'echarts', VCharts: 'VeIndex' } }, }; 原文链接：https://blog.csdn.net/qq_42991509/article/details/124104475?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816782248595539%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816782248595539&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-2-124104475-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/250
