清风白茶

我们都会上岸,阳光万里,去哪里都是鲜花开放。
vuecli3使用cdn引入插件element-ui/v-charts

vuecli3使用cdn引入插件element-ui/v-charts

前段时间使用vue做了一个后台管理系统用到了vue组件库element ui 还有 v-charts用来做图表。在最后部署的时候遇到了一些问题,在这里记录一下。

下面的所有代码,都经由博主测试可以运行。

1. vuecli3 使用webpack-bundle-analyzer

第一个是打包后太大了,我1M带宽的服务器实在是撑不住,谷歌搜了一下发现webpack-bundle-analyzer这个插件可以可视化打包后每个插件的占用的大小。按照一些博主给的方法尝试了一下并没有成功。这时候想起来vue有个add命令,随即尝试了使用add命令安装这个插件。

在项目根目录下输入

1
vue add webpack-bundle-analyzer

然后试着运行打包命令: npm run build, 发现在打包后的dist文件夹下有个report.html。打开之后是空白的我又尝试刷新了一下,惊喜,成功了。。。

QQ20200405-093348@2x

一条命令就解决了,何必要修改多个文件呢。网上太多文章抄来抄去的了。

2. 使用cdn引入插件减小打包体积

这里有一个问题,单独使用cdn引入element uiv-charts的话,这两个插件都会报错,无法正常运行。我的解决方案是一步到位,所有插件全部使用cdn引入。

1. 在vue.config.js中添加代码

没有这个文件的话就在项目根目录新建一个。 configueWebpack里是对webpack的一些设置,这里主要是添加externals里的代码,我把所有的插件都添加到了里面。需要注意的是,element-ui对应的包名是ELEMENT, v-charts对应的包名是VeIndex

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
module.exports = {
configureWebpack: {
resolve: {
alias: {
components: "@/components",
content: "components/content",
common: "components/common",
assets: "@/assets",
network: "@/network",
views: "@/views",
plugins: "@/plugins",
store: "@/store",
router: "@/router"
}
},
externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
axios: "axios",
"element-ui": "ElEMENT",
"v-charts": "VeIndex"
}
}
};

2. 修改babel.config.js

这个文件也是在项目的根目录处。 因为我们上一步在externals中添加了vue所有需要修改babel.config.js中vue的实例。

1
2
3
module.exports = {
presets: ["@vue/app"]
};

3. 注释main.js中引入的element-ui

这一步把你手动引入的element-ui注释掉,不然打包的时候还是会打包进去。

例如我实在main.js中全局引入的,就需要在main.js中注释掉与elementui的所有语句。

4. 在index.html中引入cdn

在/public/index.html中引入cdn,注意这里的引入顺序要和externals中的顺序一致。

在head标签的最后引入css样式

1
2
3
4
5
<link
href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

在body标签最后引入js文件

1
2
3
4
5
6
7
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>

完整的内容如下:

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
<!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
href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css"
rel="stylesheet"
/>

<link
href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

<title>test</title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
</body>
</html>

5. 打包

现在打包后只有75KB左右,还可以。


#

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×