likes
comments
collection
share

vuecli externals

作者站长头像
站长
· 阅读数 75

externals干嘛用的

webpack有写，自己理解下：就是改变包引用路径，开发和生产环境统统改变有效。 比如 import Vue from 'vue' 默认来说 引用‘vue’默认从node_modules里面找vue,但是vue.config.js配置了externals，就不去引用node_modules，转而去找public/index.html里面的cdn有关vue的链接。就干了这么一回事。

vuecli externals

所以最简单的配置就是：不区分开发环境和使用变量，直接用就是下面用法

configureWebpack: (config) => {
   
      /**
       * externals:externals配置的对象统统走cdn.（不管生产还是本地开发）
       * 解释一下：import A from 'a' 去使用小a的时候不走node_modules了，统统走public/index.html里面配置的cdn链接。前提是要往html里面配置cdn各种链接.到这里就结束了 externals用法就完了
       */
      config.externals = {
        vue: "Vue", //解释一下：import XX from 'vue' 这里的'vue' 就是externals的key vue. "Vue"是cdn vue链接全局挂载window上的Vue
        "vue-router": "VueRouter",
        moment: "moment",
        vant: "vant",
        axios: "axios",
        vconsole: "VConsole",
        lodash: "_",
      };
  },

//public/index.html
 <script  src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"> </script>
 ...

真实项目使用externals

  1. 区分本地和生产环境，本地走node_moduels，线上走cnd，因为cdn都是min.js/min.css。本地开发不好调用，所以本地用node_moduels
  2. 线上cdn和本地node_moduels所使用的包版本号要一致。具体看package.json里面包版本号
  3. public/index.html里面写入的那些cdn的js和css链接统统放vue.config.js里面，统一js管理

所以综合就是下面代码块

/**
 * 生产环境上cdn,本地还是走node_modules,但是2者版本号保持一致,版本号看package.json
 * https://unpkg.com/ unpkg如何找cdn链接
 * cdn  https://unpkg.com/jquery/  留下最后一个/
 * -> https://unpkg.com/browse/jquery@3.6.1/dist/jquery.slim.min.js  去掉browse/
 * -> https://unpkg.com/https://unpkg.com/jquery@3.6.1/dist/jquery.slim.min.js
 */
const CDN = {
  css: ["https://unpkg.com/vant@2.12.53/lib/index.css"],
  js: [
    "https://unpkg.com/vue@2.6.11/dist/vue.min.js",
    "https://unpkg.com/vue-router@3.2.0/dist/vue-router.min.js",
    "https://unpkg.com/vant@2.12.53/lib/vant.min.js",
    "https://unpkg.com/axios@1.1.3/dist/axios.min.js",
    "https://unpkg.com/vconsole@3.14.7/dist/vconsole.min.js",
    "https://unpkg.com/moment@2.29.4/min/moment.min.js",
    "https://unpkg.com/lodash@4.17.21/lodash.min.js",
  ],
};
module.exports = {
  publicPath: "./",
  productionSourceMap: false,

  devServer: {
    open: true,
  },

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
    } else {
      //生产环境
      /**
       * externals:externals配置的对象统统走cdn.（不管生产还是本地开发）
       * 解释一下：import A from 'a' 去使用小a的时候不走node_modules了，统统走public/index.html里面配置的cdn链接。前提是要往html里面配置cdn各种链接.到这里就结束了 externals用法就完了
       * 但是有的时候本地开发走node_modules，生产环境走cdn，于是需要区分环境
       */
      config.externals = {
        vue: "Vue", //解释一下：import XX from 'vue' 这里的'vue' 就是externals的key vue. "Vue"是cdn vue链接全局挂载window上的Vue
        "vue-router": "VueRouter",
        moment: "moment",
        vant: "vant",
        axios: "axios",
        vconsole: "VConsole",
        lodash: "_",
      };
    }
  },
  //修改已有插件用chainWebpack vuecli官网明确说过。
  //这里就解释了为啥不在configureWebpack配置define，其实也可以配，不过很麻烦。
  chainWebpack: (config) => {
    config.plugin("define").tap((args) => {
      //这样是搞不出来的  args[0]['process_env'].isProd=JSON.stringify(process.env.NODE_ENV !== "development");
      args[0].isProd = JSON.stringify(process.env.NODE_ENV !== "development"); //都需要JSON.stringify
      args[0].CDN = JSON.stringify(CDN);
      return args;
    });
  },
};


<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- 生产环境生效 配合externals一起用
 直接就是isProd CDN使用 而不是htmlWebpackPlugin.options.isProd htmlWebpackPlugin.options.CDN使用.⚠️  -->
    <% if(isProd){ %> 
      <% for(var i in CDN.css) {%> 
        <link rel="stylesheet" href="<%= CDN.css[i]%>">
      <% } %>  
    <% } %>

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>

    <!-- built files will be auto injected -->
    <!-- 生产环境生效  配合externals一起用-->

    <% if(isProd){ %>
      <% for(var i in CDN.js) {%> 
        <script  src="<%= CDN.js[i]%>"> </script>
      <% } %>  
    <% } %>
  </body>
</html>

最后码字不易，希望看官点赞👍

转载自:https://juejin.cn/post/7169964454493290509
评论
请登录