您的位置:首页 > Web前端 > Vue.js

vue项目 + iview 引入cdn

2020-02-03 04:04 1111 查看

vue项目 + iview 引入cdn

背景

vue cli + webpack 项目,使用build后,vendor包过大,因此使用cdn将静态的资源放到cdn服务器上。

步骤

  1. open build/webpack.base.conf.js 将下列代码添加到module.exports中
    externals: {
    ‘vue’:‘Vue’,
    ‘vuex’:‘Vuex’,
    ‘vuex’:‘Vuex’,
    ‘iview’:‘iView’,
    ‘ali-oss’:‘OSS’,
    ‘vue-router’:‘VueRouter’,
    },
  2. 由于要区分开发和生产环境 因此在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了。
  • 点赞
  • 收藏
  • 分享
  • 文章举报
左伊 发布了1 篇原创文章 · 获赞 0 · 访问量 17 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: