JLNTV_IPD/vue-antd-admin
Template
4
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin.git synced 2025-04-05 19:42:00 +08:00
Code Issues Projects Releases Wiki Activity

add cdn assets

Browse Source
This commit is contained in:
guoranred 2020-09-15 00:02:53 +08:00
parent e414f89e27
commit 4c7c5c1da1
2 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@ -6,12 +6,20 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
</head>
<body class="beauty-scroll">
<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>
<!-- require cdn assets js -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
</html>

44
vue.config.js
View File

@ -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