Merge pull request #1 from haisheng-lin/fix-ssr

Fix ssr

Author: haisheng-lin

build/webpack.config.base.js

@@ -11,6 +11,7 @@ const config = {
   output: {
     filename: 'bundle.[hash:8].js',
     path: path.join(__dirname, '../dist'),
+    publicPath: '//127.0.0.1:8000/public/',
   },
   module: {
     rules: [

build/webpack.config.client.js

@@ -5,7 +5,8 @@ const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 const HtmlPlugin = require('html-webpack-plugin');
 // 将非 JS 的文件单独打包分离出来，这里主要是希望单独引入 CSS
-const ExtractPlugin = require('extract-text-webpack-plugin');
+// const ExtractPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const baseConfig = require('./webpack.config.base');
 
 const VueClientPlugin = require('vue-server-renderer/client-plugin');
@@ -48,6 +49,7 @@ let config;
 if (isDev) {
   // webpack-merge 不影响 baseConfig，因为产生的是新结果
   config = webpackMerge(baseConfig, {
+    mode: 'development',
     devtool: '#cheap-module-eval-source-map',
     devServer,
     module: {
@@ -96,6 +98,7 @@ if (isDev) {
   });
 } else {
   config = webpackMerge(baseConfig, {
+    mode: 'production',
     entry: {
       // 将类库与第三方依赖单独打包成 vendor，因为如果跟业务代码混在一起，那么由于业务经常更新所以导致这些都无法长期缓存
       app: path.join(__dirname, '../client/index.js'),
@@ -110,24 +113,25 @@ if (isDev) {
       rules: [
         {
           test: /\.less$/,
-          use: ExtractPlugin.extract({
-            fallback: 'vue-style-loader',
-            use: [
-              'css-loader',
-              {
-                loader: 'postcss-loader',
-                options: {
-                  sourceMap: true,
-                },
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
               },
-              'less-loader',
-            ],
-          }),
+            },
+            'less-loader',
+          ],
         },
       ],
     },
     plugins: defaultPlugins.concat([
-      new ExtractPlugin('styles.[hash:8].css'),
+      new MiniCssExtractPlugin({
+        filename: 'styles.[contentHash:8].css'
+      }),
+      // new ExtractPlugin('styles.[hash:8].css'),
       // 在 webpack3 是 webpack.optimize.CommonsChunkPlugin
       new webpack.optimize.SplitChunksPlugin({
         name: 'runtime',

build/webpack.config.server.js

@@ -4,7 +4,6 @@ const path = require('path');
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 // 将非 JS 的文件单独打包分离出来，这里主要是希望单独引入 CSS
-const ExtractPlugin = require('extract-text-webpack-plugin');
 const baseConfig = require('./webpack.config.base');
 // windows npm script 设置变量是通过 set NODE_ENV=production
 // mac npm script 设置变量是 NODE_ENV=production NODE_ENV=production
@@ -13,6 +12,7 @@ const baseConfig = require('./webpack.config.base');
 const VueServerPlugin = require('vue-server-renderer/server-plugin')
 
 const config = webpackMerge(baseConfig, {
+  mode: 'none',
   entry: path.join(__dirname, '../client/server-entry.js'),
   target: 'node', // 服务端渲染必须传
   devtool: 'source-map',
@@ -31,24 +31,21 @@ const config = webpackMerge(baseConfig, {
         // 但是 node 端没有 dom 环境，那么就会报错
         // 所以单独打包出来
         test: /\.less$/,
-        use: ExtractPlugin.extract({
-          fallback: 'vue-style-loader',
-          use: [
-            'css-loader',
-            {
-              loader: 'postcss-loader',
-              options: {
-                sourceMap: true,
-              },
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
             },
-            'less-loader',
-          ],
-        }),
+          },
+          'less-loader',
+        ],
       },
     ],
   },
   plugins: [
-    new ExtractPlugin('styles.[hash:8].css'),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
       'process.env.VUE_ENV': '"server"',

client/config/routes.js

@@ -8,10 +8,12 @@ export default [
   },
   {
     path: '/app',
+    // component: Todo,
     component: () => import('../views/todo/todo.vue'),
   },
   {
     path: '/login',
+    // component: Login,
     component: () => import('../views/login/login.vue'),
   },
 ]

client/create-app.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuex from 'vuex'
+
+import App from './app.vue'
+import createStore from './store/store'
+import createRouter from './config/router'
+
+import './assets/styles/global.less'
+
+Vue.use(VueRouter)
+Vue.use(Vuex)
+
+export default () => {
+  const router = createRouter()
+  const store = createStore()
+  const app = new Vue({
+    router,
+    store,
+    render: h => h(App),
+  })
+  return { app, router, store }
+}

client/server-entry.js

@@ -0,0 +1,16 @@
+import createApp from './create-app'
+
+// 这里的 context 等于 server-render 里的 context
+export default context => {
+  const { app, router, store } = createApp()
+  return new Promise((resolve, reject) => {
+    router.push(context.url) // 给路由推一条记录，才能进入路由调用组件
+    router.onReady(() => {
+      const matchedComponents = router.getMatchedComponents()
+      if (!matchedComponents.length) {
+        reject(new Error('no component matched'))
+      }
+      resolve(app)
+    })
+  })
+}

favicon.ico

@@ -0,0 +1,16 @@
+{
+  "restartable": "rs",
+  "ignore": [
+    ".git",
+    "node_modules/**/node_modules",
+    ".eslintrc",
+    "client",
+    "build/webpack.config.client.js",
+    "public"
+  ],
+  "verbose": true,
+  "env": {
+    "NODE_ENV": "development"
+  },
+  "ext": "js json ejs"
+}