vue/webpack 引入 cdn 資源

時間 2019-11-10

原文原文鏈接

使用 vue 的 webpack 模版開發 spa 項目時，咱們習慣使用 npm install 安裝各類組件和依賴到本地，但引入的組件愈來愈多，打包時可能會致使 app.js 過大的問題，對加載很不友好。css

準確的說，vue/webpack 實際上是一個 webpack 工程，怎麼將 cdn 資源引入到項目中是對 webpack 進行相關配置。html

webpack 配置項 externals

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

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

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

簡單的配置如上，alias 是項目內使用時的組件名稱，ObjName 是某外部組件對外暴露的名稱。webpack

好比 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, $ 等對象。web

在模版文件中引入 cdn

index.html 模版配置以下vue-router

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 正常的引入 cdn 資源便可 -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

webpack 配置項 resovle.alias

這個也是比較好用的配置項之一，咱們能夠優雅的給各個資源目錄起一個簡約的別名，在項目中引用資源時都很方便。
js 中npm

import Index from '@/components/Index'

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

vue 模版中app

<style scoped>
div {
   background-image: url('~assets/img/bg.png')
}
</style>

方便靈活ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。