共计 834 个字符,预计需要花费 3 分钟才能阅读完成。
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 导致变大了。
正文完