vue项目 + iview 引入cdn
2020-02-03 04:04
1111 查看
vue项目 + iview 引入cdn
背景
vue cli + webpack 项目,使用build后,vendor包过大,因此使用cdn将静态的资源放到cdn服务器上。
步骤
- open build/webpack.base.conf.js 将下列代码添加到module.exports中
externals: {
‘vue’:‘Vue’,
‘vuex’:‘Vuex’,
‘vuex’:‘Vuex’,
‘iview’:‘iView’,
‘ali-oss’:‘OSS’,
‘vue-router’:‘VueRouter’,
},
- 由于要区分开发和生产环境 因此在build/webpack.dev.conf.js and webpack.prod.conf.js 中plugins 配置HtmlWebpackPlugin
cdn: {
css: [‘https://自己的cdn服务器or bootcdn/iview.css’],
js: [
‘https://自己的cdn服务器or bootcdn/vue.js’,
‘https://自己的cdn服务器or bootcdn/vuex.js’,
‘https://自己的cdn服务器or bootcdn/vue-router.js’,
‘https://自己的cdn服务器or bootcdn/iview.js’,
‘https://自己的cdn服务器or bootcdn/aliyun-oss-sdk.js’,
]
},
3. 在index.html 中配置
css
<% if (htmlWebpackPlugin.options.cdn) {%>
<% for (var css of htmlWebpackPlugin.options.cdn.css) {%>
<% }%>
<% }%>
js
<% if (htmlWebpackPlugin.options.cdn) {%>
<% for (var js of htmlWebpackPlugin.options.cdn.js) {%>
<% }%>
<% }%>
4.将 use()全部删掉 然后build一下,能正常跑起就ok了。
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue项目引入cdn资源及配置
- vue项目引入cdn加速
- vue项目引入element ui
- vue 2.0项目中如何引入element-ui详解
- vue项目中引入jquery
- 在做vue项目中,发现引入iview组件,给它设置样式没有反应
- 创建Vue项目 以及引入Iview
- vue开发:脚手架搭建的vue项目里引入jquery和bootstrap
- 用Vue-cli搭建的项目中引入css报错的原因
- vue-cli2.x项目优化之引入本地静态库文件的方法
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- vue项目引入社交分享插件
- 创建Vue项目 以及引入Iview
- 【vue】vue项目引入 Element-UI
- 随笔-vue项目引入axios
- vue-cli项目中引入第三方插件
- 用vue构建项目笔记3(引入jquery和bootstrap)
- 详解vue-cli快速构建项目以及引入bootstrap、jq
- vue项目中引入lodash
- 在Vue项目中引入css出现问题解决方法