Browse Source

chore: 增加自动扫描package.json, 从cdn引入资源

volcan0 4 years ago
parent
commit
521ef793ec
3 changed files with 47 additions and 9 deletions
  1. 18 0
      web/build.config.js
  2. 4 4
      web/public/index.html
  3. 25 5
      web/vue.config.js

+ 18 - 0
web/build.config.js

@@ -0,0 +1,18 @@
+'use strict'
+
+module.exports = {
+    title: 'GIN-VUE-ADMIN1',
+    baseCdnUrl: '//cdn.staticfile.org',
+    cdns: [
+        /**
+         * 如果设置path属性, { name: 'vue', scope: 'Vue', path: '/vue/2.6.9/vue.min.js' } 即编译出来以[baseCdnUrl][path]
+         * 否则自动拼写 [baseCdnUrl]/[name]/[version]/[name].min.js
+         * */ 
+        { name: 'vue', scope: 'Vue' },
+        { name: 'vue-router', scope: 'VueRouter' },
+        { name: 'vuex', scope: 'Vuex' },
+        { name: 'axios', scope: 'axios' },
+        { name: 'echarts', scope: 'echarts' },
+        { name: 'element-ui', scope: 'ELEMENT',  path: '/element-ui/2.12.0/index.js'},
+    ]
+};

+ 4 - 4
web/public/index.html

@@ -7,11 +7,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>GIN-VUE-ADMIN</title>
+    <title><%=htmlWebpackPlugin.options.title%></title>
     <% if(process.env.NODE_ENV!=='development'){ %>
-    <script src="//cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
-    <script src="//cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
-    <script src="//cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>    
+      <% htmlWebpackPlugin.options.cdns.forEach(function(item){ if(item.js){ %>
+        <script type="text/javascript" src="<%= item.js %>"></script>
+      <% } }) %>
     <% } %>  
 </head>
 

+ 25 - 5
web/vue.config.js

@@ -1,6 +1,8 @@
 'use strict'
 
 const path = require('path')
+const buildConf = require('./build.config')
+const packageConf = require('./package.json')
 
 function resolve(dir) {
     return path.join(__dirname, dir)
@@ -63,13 +65,31 @@ module.exports = {
                     // 不打包 begin
                     // 1.目前已经测试通过[vue,axios,echarts]可以cdn引用,其它组件测试通过后可继续添加
                     // 2.此处添加不打包后,需在public/index.html head中添加相应cdn资源链接
-                    config.set('externals', {
-                        vue: 'Vue',
-                        axios: 'axios',
-                        echarts: 'echarts'
-                    })
+                    config.set('externals', buildConf.cdns.reduce((p, a) => {
+                        p[a.name] = a.scope 
+                        return p
+                    },{}))
                     // 不打包 end
 
+                    config.plugin('html')
+                        .tap(args => {
+                            if(buildConf.title) {
+                                args[0].title = buildConf.title
+                            }
+                            if(buildConf.cdns.length > 0) {
+                                args[0].cdns = buildConf.cdns.map(conf => {
+                                    if (conf.path) {
+                                        conf.js = `${buildConf.baseCdnUrl}${conf.path}`
+                                    } else {
+                                        conf.js = `${buildConf.baseCdnUrl}/${conf.name}/${packageConf.dependencies[conf.name].replace('^', '')}/${conf.name}.min.js`
+                                    }
+
+                                    return conf
+                                })
+                            }
+                            return args
+                        })
+
                     config
                         .plugin('ScriptExtHtmlWebpackPlugin')
                         .after('html')