“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情”

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中配置有所不同)

0. 导入html-webpack-plugin模块

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

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

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

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