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

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

成都创新互联公司成立于2013年，是专业互联网技术服务公司，拥有项目网站设计制作、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元文圣做网站,已为上家服务,为文圣各地企业和个人服务,联系电话:13518219792

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) { %>
   
  <% } %>
 

网页标题：vue-cli3.0如何使用CDN区分开发、生产、预发布环境-创新互联
URL链接：http://cdkjz.cn/article/hshdd.html