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

make the name of file more impressive; add activation of client side in ssr; add compiler config of client side in ssr;
zhangzhuang15 · Aug 23, 2023 · ce10c32 · ce10c32
1 parent 7c4e147
commit ce10c32
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 12 deletions.
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/main.server.js → src/App.js b/src/main.server.js → 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/main.js → src/spa-client.js b/src/main.js → 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())
-};
+};