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区分开发、生产、预发布环境-创新互联
当前网址:http://azwzsj.com/article/hshdd.html