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