iview4应用CDN加载
index.html(href与src外面的地址能够替换成对应cdn地址)
<head> <link href="./lib/iview/styles/iview.css" rel="stylesheet" /></head><body> <script src="./lib/iview/iview.min.js"></script></body>
vue.config.js
module.exports = { configureWebpack: { externals: { 'view-design': 'iview', iview: 'ViewUI', } }}
应用定制主题
因为是应用cdn引入iview,所以官网的上面这种形式就不能够用了。
@import '~view-design/src/styles/index.less';// Here are the variables to cover, such as:@primary-color: #8c0776;
咱们要手动把iview我的项目外面的styles文件夹的文件放到本人的我的项目外面(去iview4的GitHub下载)
下载后,新建iview_change.less文件,把官网引入代码批改为(具体引入地址为本人我的项目下iview的styles文件夹地址)
@import '~@/dil/iViewUI/styles/index.less';// Here are the variables to cover, such as:@primary-color: #8c0776;
最初引入iview
import Vue from 'vue'import ViewUI from 'view-design'import '@/css/iview_change.less'Vue.use(ViewUI, { transfer: true})
做完下面的操作后,iview4应用cdn加载后应该能够失常的应用定制主题了。你的我的项目打包文件再也不必带上iview导致变大了。