demo

update
2019-04-24 17:58:43 +08:00
3 changed files with 32 additions and 3 deletions
--- a/public/index.html
+++ b/public/index.html
@ -6,11 +6,22 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
+
+    <!-- 引入样式 -->
+    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
+      <link rel="stylesheet" href="<%=css%>">
+    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
+
+     <!-- 引入JS -->
+    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
+      <script src="<%=js%>"></script>
+    <% } %>
+
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,12 +1,9 @@
-import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'

-Vue.use(Vuex)
-
 const store = new Vuex.Store({
  modules: {
    app,
--- a/vue.config.js
+++ b/vue.config.js
@ -51,9 +51,30 @@ module.exports = {
      alias: {
        '@': resolve('src')
      }
+    },
+    externals: {
+      vue: 'Vue',
+      'element-ui': 'ELEMENT'
    }
  },
  chainWebpack(config) {
+    const cdn = {
+      css: [
+        // element-ui css
+        'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
+      ],
+      js: [
+        // vue must at first!
+        'https://unpkg.com/vue/dist/vue.js',
+        // element-ui js
+        'https://unpkg.com/element-ui/lib/index.js'
+      ]
+    }
+    config.plugin('html')
+      .tap(args => {
+        args[0].cdn = cdn
+        return args
+      })
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test