vue项目webpack使用cdn

最新推荐文章于 2024-08-16 07:48:58 发布

cq-wangyong

最新推荐文章于 2024-08-16 07:48:58 发布

阅读量2.1k

点赞数 1

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_30282133/article/details/107351084

版权

本文通过实例介绍如何在Vue项目中利用Webpack配置CDN，以提高页面加载速度。内容涉及index.html、webpack.base.config.js、main.js及router/index.js等关键文件的修改和配置。

摘要由CSDN通过智能技术生成

引入cdn是为了减少打包体积，加快渲染速度

1.在index.html中引入vue和vue-router
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>

2.在build文件夹中的webpack.base.conf.js添加
externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter'
},
//格式为： “资源名”:“外部资源名” （注意：外部资源名由模块自身决定，不可更改。）
//资源名可以是任意字符，是webpack给外部资源定义的别名
//外部资源名 是外部资源所export暴露到全局的对象名称，查看外部资源名的方法，在index.html文件中引入对应的cdn文件，然后在浏览器打开index.html，控制台输入对应的开头几个字母就可以看到对用的外部资源名

3.删除项目中的对应资源的import引入
删除main.js中的   
    import Vue from 'vue'  语句
删除src/router/index.js中的 
    import Vue from 'vue'
    import Router from 'vue-router'
将Vue.use(Router)改为Vue.use(VueRouter)
将new Router改为new VueRouter

4.运行npm run build打包可以看到体积明显变小