import{_ as s,c as n,o as a,a as l}from"./app.614cd5ee.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-externals-\u5F15\u5165-cdn-\u8D44\u6E90"}],"relativePath":"guide/vue2/externals.md","lastUpdated":1660905312000}'),p={name:"guide/vue2/externals.md"},o=l(`

\u2705 \u914D\u7F6E externals \u5F15\u5165 cdn \u8D44\u6E90

\u8FD9\u4E2A\u7248\u672C CDN \u4E0D\u518D\u5F15\u5165\uFF0C\u6211\u6D4B\u8BD5\u4E86\u4E00\u4E0B\u4F7F\u7528\u5F15\u5165 CDN \u548C\u4E0D\u4F7F\u7528,\u4E0D\u4F7F\u7528\u4F1A\u6BD4\u4F7F\u7528\u65F6\u95F4\u5C11\u3002\u7F51\u4E0A\u4E0D\u5C11\u6587\u7AE0\u6D4B\u8BD5 CDN \u901F\u5EA6\u5757\uFF0C\u8FD9\u4E2A\u5F00\u53D1\u8005\u53EF \u4EE5\u5B9E\u9645\u6D4B\u8BD5\u4E00\u4E0B\u3002

\u53E6\u5916\u9879\u76EE\u4E2D\u4F7F\u7528\u7684\u662F\u516C\u5171 CDN \u4E0D\u7A33\u5B9A\uFF0C\u57DF\u540D\u89E3\u6790\u4E5F\u662F\u9700\u8981\u65F6\u95F4\u7684\uFF08\u5982\u679C\u4F60\u8981\u4F7F\u7528\u8BF7\u5C3D\u91CF\u4F7F\u7528\u540C\u4E00\u4E2A\u57DF\u540D\uFF09

\u56E0\u4E3A\u9875\u9762\u6BCF\u6B21\u9047\u5230<script>\u6807\u7B7E\u90FD\u4F1A\u505C\u4E0B\u6765\u89E3\u6790\u6267\u884C\uFF0C\u6240\u4EE5\u5E94\u8BE5\u5C3D\u53EF\u80FD\u51CF\u5C11<script>\u6807\u7B7E\u7684\u6570\u91CF HTTP\u8BF7\u6C42\u5B58\u5728\u4E00\u5B9A\u7684\u5F00\u9500\uFF0C100K \u7684\u6587\u4EF6\u6BD4 5 \u4E2A 20K \u7684\u6587\u4EF6\u4E0B\u8F7D\u7684\u66F4\u5FEB\uFF0C\u6240\u4EE5\u8F83\u5C11\u811A\u672C\u6570\u91CF\u4E5F\u662F\u5F88\u6709\u5FC5\u8981\u7684

\u6682\u65F6\u8FD8\u6CA1\u6709\u7814\u7A76\u653E\u5230\u81EA\u5DF1\u7684 cdn \u670D\u52A1\u5668\u4E0A\u3002

javascript
const defaultSettings = require('./src/config/index.js')
const name = defaultSettings.title || 'vue mobile template'
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

// externals
const externals = {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    vant: 'vant',
    axios: 'axios',
}
// CDN\u5916\u94FE\uFF0C\u4F1A\u63D2\u5165\u5230index.html\u4E2D
const cdn = {
    // \u5F00\u53D1\u73AF\u5883
    dev: {
        css: [],
        js: [],
    },
    // \u751F\u4EA7\u73AF\u5883
    build: {
        css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
        js: [
            'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
            'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
            'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
            'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
            'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js',
        ],
    },
}
module.exports = {
    configureWebpack: config => {
        config.name = name
        // \u4E3A\u751F\u4EA7\u73AF\u5883\u4FEE\u6539\u914D\u7F6E...
        if (IS_PROD) {
            // externals
            config.externals = externals
        }
    },
    chainWebpack: config => {
        /**
         * \u6DFB\u52A0CDN\u53C2\u6570\u5230htmlWebpackPlugin\u914D\u7F6E\u4E2D
         */
        config.plugin('html').tap(args => {
            if (IS_PROD) {
                args[0].cdn = cdn.build
            } else {
                args[0].cdn = cdn.dev
            }
            return args
        })
    },
}

\u5728 public/index.html \u4E2D\u6DFB\u52A0

javascript
    <!-- \u4F7F\u7528CDN\u7684CSS\u6587\u4EF6 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
     <!-- \u4F7F\u7528CDN\u52A0\u901F\u7684JS\u6587\u4EF6\uFF0C\u914D\u7F6E\u5728vue.config.js\u4E0B -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
`,8),e=[o];function t(c,D,r,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};