demo

PanJiaChen · PanJiaChen · commit eaaa3c1ddadd · 2019-04-24T17:58:43.000+08:00
update
diff --git 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>
diff --git 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,
diff --git 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
 
