js脚本 vue 引入cdn_vue/webpack 引入 cdn 资源

使用 vue 的 webpack 模版开发 spa 项目时，我们习惯使用 npm install 安装各种组件和依赖到本地，但引入的组件越来越多，打包时可能会导致 app.js 过大的问题，对加载很不友好。

准确的说，vue/webpack 其实是一个 webpack 工程，怎么将 cdn 资源引入到项目中是对 webpack 进行相关配置。

webpack 配置项 externals

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 模版配置如下

webpack 配置项 resovle.alias

这个也是比较好用的配置项之一，我们可以优雅的给各个资源目录起一个简约的别名，在项目中引用资源时都很方便。

js 中

import Index from '@/components/Index'

import 'assets/css/common.css'

import 'static/css/common.css'

vue 模版中

div {

background-image: url('~assets/img/bg.png')

}

方便灵活