vue/webpack 引入 cdn 资源

番茄西红柿发布于2019-07-16 14:29 / 2247人阅读

摘要：准确的说，其实是一个工程，怎么将资源引入到项目中是对进行相关配置。配置项官方说明文档在中配置即可简单的配置如上，是项目内使用时的组件名称，是某外部组件对外暴露的名称。

使用 vue 的 webpack 模版开发 spa 项目时，我们习惯使用 npm install 安装各种组件和依赖到本地，但引入的组件越来越多，打包时可能会导致 app.js 过大的问题，对加载很不友好。

准确的说，vue/webpack 其实是一个 webpack 工程，怎么将 cdn 资源引入到项目中是对 webpack 进行相关配置。

webpack 配置项 externals

官方说明文档：https://webpack.docschina.org...

module.exports = {
    module: {
        ...
    },
    externals: {
        vue: Vue,
        vue-router: VueRouter,
        alias: ObjName
    },
    ....
}

vue/webpack 在 build/webpack.base.conf.js 中配置即可

简单的配置如上，alias 是项目内使用时的组件名称，ObjName 是某外部组件对外暴露的名称。

比如 vue       的 window 全局名称是 Vue
比如 vue-router的 window 全局名称是 VueRouter
比如 jquery    的 window 全局名称是 Jquery

在项目 js 中引入

# webpack 会检测这些组件是否在 externals 中注册
# 如果注册则不会将其打包到 app.js 中
import Vue from vue
import VueRouter from vue-router
import $ from jquery

这样配置的话 webpack 在 dev 运行或 build 打包时，就不会去本地组件包中查找这些在 externals 中注册的组件了（自然也不会将他们打包到一个 app.js 中去），而是会去 window 域下直接调用 Vue, VueRouter, $ 等对象。

在模版文件中引入 cdn

index.html 模版配置如下



  
    
    
    <%= htmlWebpackPlugin.options.title %>

webpack 配置项 resovle.alias

这个也是比较好用的配置项之一，我们可以优雅的给各个资源目录起一个简约的别名，在项目中引用资源时都很方便。
js 中

import Index from @/components/Index

import assets/css/common.css
import static/css/common.css

vue 模版中

方便灵活

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/33806.html

vue/webpack 引入 cdn 资源

摘要：准确的说，其实是一个工程，怎么将资源引入到项目中是对进行相关配置。配置项官方说明文档在中配置即可简单的配置如上，是项目内使用时的组件名称，是某外部组件对外暴露的名称。使用 vue 的 webpack 模版开发 spa 项目时，我们习惯使用 npm install 安装各种组件和依赖到本地，但引入的组件越来越多，打包时可能会导致 app.js 过大的问题，对加载很不友好。准确的说，v...

Neilyo 2019-06-21 16:12 评论0 收藏0
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式

摘要：是目前使用最为火热的打包工具，各大知名的框架类库都用其打包，国内使用最近也火热起来。但是坑也很多，比如说图片，字体等文件的路径。 webpack 是目前使用最为火热的打包工具，各大知名的框架类库都用其打包，国内使用最近也火热起来。它在单页应用和类库打包上帮助许多人从代码管理中解脱了出来，成为了当下风靡一时的打包工具。但是坑也很多，比如说图片，字体等文件的路径。刚开始用webpack...

zgbgx 2019-08-21 17:45 评论0 收藏0
webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
一字一句的搞懂vue-cli之vue webpack template配置

摘要：神一样的存在。所以呢，就利用两天时间，参考了一些他人的文章，查阅了一些官方的配置，就在此先稍微记录一下。这份配置解析是基于最新版本的。不过，我非常建议，先别看我的文章，自己一句一句的通读一遍。和中的配置含义相似。 webpack--神一样的存在。无论写了多少次，再次相见，仍是初见。有的时候开发vue项目，对尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的东西，真的很不想折...

atinosun 2019-08-22 11:20 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0