Vue项目中CDN的使用—webpack排除打包

像xlsx,element功能性很全的插件，可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度

基本使用

在线地址映射的网址

一、在vue.config.js中添加 externals 让 webpack 不打包 xlsx 和 element

// 判断当前所在的环境 如果环境变量从 .env.development 拿出来的, 就证明是开发环境

const isDev = process.env.ENV === 'development'

// 默认情况下, 既不排除任何包, 也不引入任何 cdn
let externals = {}
let jsCDN = []

if (!isDev) {
  // 判断到当前实在非开发环境, 追加排除的包以及远程cdn地址
  // 配置排除打包的对象
  // 里面的属性是以 key: value 键值对形式指定
  // 需要被排除的包名: 排除以后再全局可以替代的变量名
  externals = {
    // 'jQuery': '$',
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX'
  }

  // 创建数组管理要引入的 cdn 地址
  jsCDN = [
    'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js',
    'https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.4/xlsx.min.js'
  ]
}

在 vue.config.js 的configureWebpack节点中加上配置

externals

二、注入CDN文件到模板

通过 html-webpack-plugin注入到 index.html之中

在 vue.config.js 的chainWebpack节点中：

// 拦截html的生成, 在参数中添加 cdn 数组
    config.plugin('html').tap(args => {
      args[0].jsCDN = jsCDN
      return args
    })

在 public/index.html中引入插件的在线地址

body节点

<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.jsCDN) { %>
  <script src="<%=js%>"></script>
<% } %>

补充

vue.config.js 配置

即之前的webpack.config.js，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载

vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建

html-webpack-plugin插件

是一个webpack的插件，基于webpack来使用的。

作用

html-webpack-plugin能够在内存中创建一个index.html，自动将webpack-dev-server打包生成内存中的bundle.js导入这个index.html。

npm安装

npm i html-webpack-plugin -D

配置

webpack.config.js(与在vue.config.js中配置有所不同)

1. 导入html-webpack-plugin模块

   const htmlWebpackPlugin = require('html-webpack-plugin')

2. 在 plugins:[] 中创建一个 new htmlWebpackPlugin对象

3. 在这个对象中传入配置参数:

   • template:path.join(_disrname,'./src/index.html')----需要复制在内存中的文件路径

   • filename:'index.html'--------复制完成后的文件名