vue/webpack 引入 cdn 資源

Neilyo 發(fā)布于2019-06-21 16:12 / 1275人閱讀

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

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

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

webpack 配置項(xiàng) externals

官方說(shuō)明文檔：https://webpack.docschina.org...

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

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

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

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

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

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

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

在模版文件中引入 cdn

index.html 模版配置如下



  
    
    
    <%= htmlWebpackPlugin.options.title %>

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

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

import Index from "@/components/Index"

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

vue 模版中

方便靈活

GPU云服務(wù)器云服務(wù)器 php 引入資源文件 cdn 引入 cdn引入 cdn 引入cdn

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

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

相關(guān)文章

vue/webpack 引入 cdn 資源

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

番茄西紅柿 2019-07-16 14:29 評(píng)論0 收藏0
網(wǎng)站子目錄部署VUE webpack 打包資源文件路徑的正確引用方式

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

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

摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(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)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...

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

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

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

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

zxhaaa 2019-08-22 16:11 評(píng)論0 收藏0