From 4c7c5c1da1501814fbc07504199168878f743dc2 Mon Sep 17 00:00:00 2001 From: guoranred <13926187239@163.com> Date: Tue, 15 Sep 2020 00:02:53 +0800 Subject: [PATCH] add cdn assets --- public/index.html | 8 ++++++++ vue.config.js | 44 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 61725f6..719a471 100644 --- a/public/index.html +++ b/public/index.html @@ -6,12 +6,20 @@ <%= htmlWebpackPlugin.options.title %> + + <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> + + <% } %>
+ + <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> + + <% } %> diff --git a/vue.config.js b/vue.config.js index 8277792..d009ff8 100644 --- a/vue.config.js +++ b/vue.config.js @@ -2,6 +2,33 @@ let path = require('path') const ThemeColorReplacer = require('webpack-theme-color-replacer') const {getThemeColors, modifyVars} = require('./src/utils/themeUtil') const {resolveCss} = require('./src/utils/theme-color-replacer-extend') + +const isProd = process.env.NODE_ENV === 'production' + +const assetsCDN = { + // webpack build externals + externals: { + vue: 'Vue', + 'vue-router': 'VueRouter', + vuex: 'Vuex', + axios: 'axios', + nprogress: 'NProgress', + clipboard: 'ClipboardJS', + '@antv/data-set': 'DataSet' + }, + css: [ + ], + js: [ + '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', + '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js', + '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js', + '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', + '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js', + '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js', + '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js' + ] +} + module.exports = { devServer: { // proxy: { @@ -30,16 +57,29 @@ module.exports = { resolveCss }) ) + config.externals = isProd ? assetsCDN.externals : {} }, chainWebpack: config => { // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突 - if (process.env.NODE_ENV === 'production') { + if (isProd) { config.plugin('optimize-css') .tap(args => { args[0].cssnanoOptions.preset[1].colormin = false return args }) } + config.plugin('html') + .tap(args => { + args[0].title = 'Vue Antd Admin' + return args + }) + if (isProd) { + config.plugin('html') + .tap(args => { + args[0].cdn = assetsCDN + return args + }) + } }, css: { loaderOptions: { @@ -51,7 +91,7 @@ module.exports = { } } }, - publicPath: process.env.NODE_ENV === 'production' ? '/vue-antd-admin/' : '/', + publicPath: isProd ? '/vue-antd-admin/' : '/', outputDir: 'dist', assetsDir: 'static', productionSourceMap: false