自动辨别在不同环境是否启用CDN加速

提示：不同环境是指开发环境或生产环境

---

前言

为了能够区分生产环境(打包)时使用CDN加速包使dist瘦身，开发环境使用自己下载的包。

---

直接上代码吧，就不解释了

一、步骤1（修改vue.config.js）

• 影响打包时，index.htm1引入其他资源的前缀地址
• ./可以让开发环境和生产环境都可以正常使用,为了严谨一些还是要换回来
• 开发环境: ‘/’
• 生产环境: ‘./’
• node里有个内置的环境变量 process.env.NODE_ENV
• process.env.NODE_ENV 它会根据你敲击的命令，来使用不同的值解决:
• 如果你敲击 npm run server，process.env.NODE_ENV 的值就是 ‘development’ 字符串
• 如果你敲击 npm run build， process.env.NODE_ENV 的值就是 ’production’ 字符串

const {defineConfig} = require('@vue/cli-service')
// 需要排除的包，对象
let externals = {}
//需要配置的CDN链接
let CDN = {css: [], js: []}
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如果是生产环境，需要执行以下逻辑
if (isProduction) {
  externals = {
    /**
     * externals 对象属性解析：
     * '包名': '在项目中引入的名字'
     * 以 element-ui 举例 我再 main.js 里是以
     * import ELEMENT from 'element-ui'
     * Vue.use(ELEMENT)
     * 这样引入的，所以我的 externals 的属性值应该是 ELEMENT
     * 一定要去main.js设置
     */
    'echarts': echarts',
    'vue': Vue',
    'vue-router': 'VueRouter',
    'vuex': Vuex',
    'axios': axios',
    'dayjs': 'dayjs',
    'element-ui': 'ELEMENT',
    'vue-quill-editor': 'VueQuillEditor',
    'vuex-persistedstate': 'createPersistedState'
  }
  CDN = {
    css: [ // element-ui css 样式表
      'https://unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.core.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.snow.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.bubble.css'
    ],
    js: [
      'https://unpkg.com/echarts@5.3.2/dist/echarts.min.js',
      'https://unpkg.com/vue@2.6.14/dist/vue.js',
      'https://unpkg.com/vue-router@3.5.1/dist/vue-router.js',
      'https://unpkg.com/vuex@3.6.2/dist/vuex.js',
      'https://unpkg.com/axios@0.27.2/dist/axios.min.js',
      'https://unpkg.com/dayjs@1.11.3/dayjs.min.js',
      'https://unpkg.com/element-ui@2.15.8/lib/index.js',
      'https://unpkg.com/quill@1.3.7/dist/quill.js',
      'https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js',
      'https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js'
    ]
  }
}
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  configureWebpack: {
    externals: externals,
  },
  chainWebpack (config) {
    // 注入cdn变量（打包时会执行)
    config.plugin("html").tap(args => {
      // 参数对象添加属性叫cdn，值就是上面CDN对象
      args[0].cdn = CDN // 配置CDN 给插件
      return args
    })
  }
})

二、步骤2(修改public文件夹下的index.html)

在该文件中的title标签下插入以下内容

<!-- 模板引擎的语法: ejs，artTemplate
      可以直接在 html 文件的标签里，注入js代码
      后来有了vue，vue也有自己的模板语法(指令，插值表达式)
      模板都会被代码翻译成原生的标签，让浏览器识别
  -->
  <!-- 引入样式 -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" ref="<%=css%>">
  <% } %>

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

三、步骤3

如果在开发环境就敲 npm run serve 命令运行，在生产环境就敲 npm run build 命令打包，以上配置好后会自动根据你敲的命令决定是否使用CDN加速。

---

总结

// 1. publicPath:影响的是打包(webpack开发服务器/dist)的时候index.html引入其他资源的前缀地址
// 情况1：开发环境,值：‘/'
// 情况2：生产环境，值：'./'(才能确保dist/index.html相对路径下访问)

// 2. dist瘦身：影响dist的体积，其他第三方包用cdn地址引入到index. html中保证运行
// 情况1:开发环境
// (1): externals无值(不排除第三方包)
// (2): index.html里不引入cdn地址//
// 情况2:生产环境
// (1): externals有值(排除第三方包)
// (2): index.htm1引入cdn地址