Vue-Cli 4.0 CDN方式使用view-design (iview4)

原创于 2021-10-29 23:28:52 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

通过在vue.config.js中配置externals，结合在index.html引入CDN，可以显著减少chunk-vendors.js文件大小，提升页面加载速度。具体操作包括在vue.config.js中设置Vue和view-design为外部依赖，并在公共HTML文件中引入unpkg.com上的Vue和view-design的min.js及css链接。这种方法避免了本地部署view-design的dist文件夹。

使用CDN方式加载view-design可明显减小 chunk-vendors.js 文件尺寸，提高页面加载速度。

配置方法如下：

1. 在vue.config.js里增加 configureWebpack，表示Vue和view-design从外部CDN加载。

configureWebpack: {
	externals: {
	    vue:"Vue",
		"view-design": "iview"
	}
},

注意：不能仅从外部加载view-design会报错，必须同时从外部加载Vue

2.在public/index.html增加引用

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css"> 
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>

其他配置不用动，main.js里保持不变

import ViewUI from 'view-design'
Vue.use(ViewUI);

如果不使用外部的cdn，需要把整个view-design的dist文件夹下载部署

UNPKG - view-designhttps://unpkg.com/browse/view-design@4.7.0-beta.11/dist/