vue/webpack 引入 cdn 資源

番茄西紅柿發(fā)布于2019-07-16 14:29 / 2251人閱讀

摘要：準(zhǔn)確的說，其實(shí)是一個(gè)工程，怎么將資源引入到項(xiàng)目中是對進(jìn)行相關(guān)配置。配置項(xiàng)官方說明文檔在中配置即可簡單的配置如上，是項(xiàng)目內(nèi)使用時(shí)的組件名稱，是某外部組件對外暴露的名稱。

使用 vue 的 webpack 模版開發(fā) spa 項(xiàng)目時(shí)，我們習(xí)慣使用 npm install 安裝各種組件和依賴到本地，但引入的組件越來越多，打包時(shí)可能會導(dǎo)致 app.js 過大的問題，對加載很不友好。

準(zhǔn)確的說，vue/webpack 其實(shí)是一個(gè) webpack 工程，怎么將 cdn 資源引入到項(xiàng)目中是對 webpack 進(jìn)行相關(guān)配置。

webpack 配置項(xiàng) externals

官方說明文檔：https://webpack.docschina.org...

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

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

簡單的配置如上，alias 是項(xiàng)目內(nèi)使用時(shí)的組件名稱，ObjName 是某外部組件對外暴露的名稱。

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

在項(xiàng)目 js 中引入

# webpack 會檢測這些組件是否在 externals 中注冊
# 如果注冊則不會將其打包到 app.js 中
import Vue from vue
import VueRouter from vue-router
import $ from jquery

這樣配置的話 webpack 在 dev 運(yùn)行或 build 打包時(shí)，就不會去本地組件包中查找這些在 externals 中注冊的組件了（自然也不會將他們打包到一個(gè) app.js 中去），而是會去 window 域下直接調(diào)用 Vue, VueRouter, $ 等對象。

在模版文件中引入 cdn

index.html 模版配置如下



  
    
    
    <%= htmlWebpackPlugin.options.title %>

webpack 配置項(xiàng) resovle.alias

這個(gè)也是比較好用的配置項(xiàng)之一，我們可以優(yōu)雅的給各個(gè)資源目錄起一個(gè)簡約的別名，在項(xiàng)目中引用資源時(shí)都很方便。
js 中

import Index from @/components/Index

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

vue 模版中

方便靈活

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/33806.html

相關(guān)文章

vue/webpack 引入 cdn 資源

摘要：準(zhǔn)確的說，其實(shí)是一個(gè)工程，怎么將資源引入到項(xiàng)目中是對進(jìn)行相關(guān)配置。配置項(xiàng)官方說明文檔在中配置即可簡單的配置如上，是項(xiàng)目內(nèi)使用時(shí)的組件名稱，是某外部組件對外暴露的名稱。使用 vue 的 webpack 模版開發(fā) spa 項(xiàng)目時(shí)，我們習(xí)慣使用 npm install 安裝各種組件和依賴到本地，但引入的組件越來越多，打包時(shí)可能會導(dǎo)致 app.js 過大的問題，對加載很不友好。準(zhǔn)確的說，v...

Neilyo 2019-06-21 16:12 評論0 收藏0
網(wǎng)站子目錄部署VUE webpack 打包資源文件路徑的正確引用方式

摘要：是目前使用最為火熱的打包工具，各大知名的框架類庫都用其打包，國內(nèi)使用最近也火熱起來。但是坑也很多，比如說圖片，字體等文件的路徑。 webpack 是目前使用最為火熱的打包工具，各大知名的框架類庫都用其打包，國內(nèi)使用最近也火熱起來。它在單頁應(yīng)用和類庫打包上幫助許多人從代碼管理中解脫了出來，成為了當(dāng)下風(fēng)靡一時(shí)的打包工具。但是坑也很多，比如說圖片，字體等文件的路徑。剛開始用webpack...

zgbgx 2019-08-21 17:45 評論0 收藏0
webpack 基礎(chǔ)與項(xiàng)目優(yōu)化實(shí)踐總結(jié)

摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...

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

摘要：神一樣的存在。所以呢，就利用兩天時(shí)間，參考了一些他人的文章，查閱了一些官方的配置，就在此先稍微記錄一下。這份配置解析是基于最新版本的。不過，我非常建議，先別看我的文章，自己一句一句的通讀一遍。和中的配置含義相似。 webpack--神一樣的存在。無論寫了多少次，再次相見，仍是初見。有的時(shí)候開發(fā)vue項(xiàng)目，對尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的東西，真的很不想折...

atinosun 2019-08-22 11:20 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前一、團(tuán)隊(duì)組織網(wǎng)站說明騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0