fix moduslabs#7, which contains 2 div element with same id;

zhangzhuang15 · zhangzhuang15 · commit ce10c323df97 · 2023-08-23T15:14:20.000+08:00
make the name of file more impressive;
add activation of client side in ssr;
add compiler config of client side in ssr;
diff --git a/package.json b/package.json
@@ -5,7 +5,9 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "pressr": "cross-env SSR=true vue-cli-service build",
+    "pressr-client": "cross-env SSR=true CLIENT=true vue-cli-service build",
+    "pressr-server": "cross-env SSR=true vue-cli-service build",
+    "pressr": "pnpm run pressr-server && pnpm run pressr-client",
     "ssr": "node src/server.js",
     "lint": "vue-cli-service lint"
   },
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="main">
     <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
@@ -17,7 +17,7 @@ export default {
 </script>
 
 <style>
-#app {
+#main {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/server.js b/src/server.js
@@ -3,10 +3,12 @@ const express = require("express");
 const { createSSRApp } = require("vue");
 const { renderToString } = require("@vue/server-renderer");
 const manifest = require("../dist/ssr-manifest.json");
+const clientManifest = require("../client-dist/ssr-manifest.json");
 
 const server = express();
 
 const appPath = path.join(__dirname, "../dist", manifest["app.js"]);
+const clientAppPath = path.join(__dirname, "../client-dist", clientManifest["client.js"]);
 const App = require(appPath).default;
 
 server.use("/img", express.static(path.join(__dirname, "../dist", "img")));
@@ -16,6 +18,10 @@ server.use(
   "/favicon.ico",
   express.static(path.join(__dirname, "../dist", "favicon.ico"))
 );
+server.use(
+  "/client.js",
+  express.static(clientAppPath)
+);
 
 server.get("*", async (req, res) => {
   const app = createSSRApp(App);
@@ -26,9 +32,10 @@ server.get("*", async (req, res) => {
     <head>
       <title>Hello</title>
       <link rel="stylesheet" href="${manifest["app.css"]}" />
+      <script src="/client.js"></script>
     </head>
     <body>
-      ${appContent}
+      <div id="app">${appContent}</div>
     </body>
   </html>
 
diff --git a/src/spa-client.js b/src/spa-client.js
diff --git a/src/ssr-client.js b/src/ssr-client.js
@@ -0,0 +1,5 @@
+import { createSSRApp } from "vue";
+import App from "./App.vue";
+
+
+createSSRApp(App).mount("#app")
diff --git a/vue.config.js b/vue.config.js
@@ -1,26 +1,80 @@
 const ManifestPlugin = require("webpack-manifest-plugin");
 const nodeExternals = require("webpack-node-externals");
 
+const isClient = process.env.CLIENT === "true";
+const isSSR = process.env.SSR === "true";
+
+/**
+ * change the output dir for compiled files
+ * https://github.com/vuejs/vue-cli/issues/2202
+ */
+if (isClient) {
+  exports.outputDir = "client-dist";
+}
+
 exports.chainWebpack = webpackConfig => {
-  if (!process.env.SSR) {
+  if (!isSSR) {
     // This is required for repl.it to play nicely with the Dev Server
     webpackConfig.devServer.disableHostCheck(true);
     return;
   }
 
+  /**
+   * By default, vue-cli-service uses "app" as entry point for webpack,
+   * and the corresponding entry point file  is "./src/main.js".
+   * 
+   * When we compile the file on ssr client side, we just allow "client" as 
+   * the only entry point for webpack, and the corresponding entry point 
+   * file is "./src/ssr-client.js", so we should delete "app", otherwise, 
+   * vue-cli-service will be failed because of the lack of "./src/main.js"
+   */
   webpackConfig
-    .entry("app")
-    .clear()
-    .add("./src/main.server.js");
+    .entryPoints
+    .delete("app");
+
 
-  webpackConfig.target("node");
-  webpackConfig.output.libraryTarget("commonjs2");
+  if (isClient) {
+    /**
+     * Compile ./src/ssr-client.js, and we will response the compiled file
+     * to browser in ./src/server.js.We won't import vue separately, so we
+     * also need to bundle vue into the compiled file.
+     */
+    webpackConfig
+      .entry("client")
+      .clear()
+      .add("./src/ssr-client.js");
+  } else if (isSSR) {
+    /**
+     * Compile ./src/App.js, so we could require it in ./src/server.js.
+     * 
+     * We already require "vue" in ./src/server.js, so we don't need to
+     * bundle it, but we still need to compile and bundle .css or .vue files,
+     * so we add `nodeExternals` below.
+     */
+    webpackConfig
+      .entry("app")
+      .clear()
+      .add("./src/App.js");
 
+    webpackConfig.target("node");
+    webpackConfig.output.libraryTarget("commonjs2");
+    webpackConfig.externals(nodeExternals({ allowlist: /\.(css|vue)$/ }));
+
+  } else {
+    /**
+     * Compile for SPA
+     */
+    webpackConfig
+      .entry("app")
+      .clear()
+      .add("./src/spa-client.js");
+  }
+  
   webpackConfig
     .plugin("manifest")
     .use(new ManifestPlugin({ fileName: "ssr-manifest.json" }));
 
-  webpackConfig.externals(nodeExternals({ allowlist: /\.(css|vue)$/ }));
+
 
   webpackConfig.optimization.splitChunks(false).minimize(false);
 
@@ -31,4 +85,4 @@ exports.chainWebpack = webpackConfig => {
   webpackConfig.plugins.delete("friendly-errors");
 
   // console.log(webpackConfig.toConfig())
-};
+};
