vue-cli3.0如何使用CDN区分开发、生产、预发布环境-创新互联

前言：上一篇记录文vue-cli 3.0 build包太大导致首屏过长的解决方案中提到了CDN优化，之前是直接在html中手动注入JS，也没有对开发和生产模式进行区分，因为是使用收费的CDN，所以在开发模式会遇到无权使用CDN的问题。要是使用CDN写死在html中，不同环境需要手动的切换CDN，那么早晚有一天会搞乱，下面就说说怎么在vue-cli 3.0 中根据不同环境动态注入CDN。

1. 修改public/index.html

通过htmlwebpackplugin动态注入脚本和样式，index.html如下：

 
  
  
  
  
  
  
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
   
   
  <% } %>
  
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
   
  <% } %>
 
 
  
  

   

  
  

  
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
   
  <% } %>