vue/webpack 引入 cdn 資源

番茄西紅柿發布于2019-07-16 14:29 / 2295人閱讀

摘要：準確的說，其實是一個工程，怎么將資源引入到項目中是對進行相關配置。配置項官方說明文檔在中配置即可簡單的配置如上，是項目內使用時的組件名稱，是某外部組件對外暴露的名稱。

使用 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 模版中

方便靈活

GPU云服務器云服務器 php 引入資源文件 cdn 引入 cdn引入 cdn 引入cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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