fix: 🐛 Fix routing error and add error page and handler

1. fix dynamic routing , change route mode to hash and avoid specific
route from slug unknown

BREAKING CHANGE: 🧨 route mode changed

✅ Closes: #8

Dockerfile

@@ -1,17 +1,9 @@
-FROM node:fermium-buster-slim
-
-RUN echo 'registry=https://registry.npm.taobao.org/ \
-ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ \
-ELECTRON_BUILDER_BINARIES_MIRROR=https://pan.yasking.org/electron-builder/ \
-strict-ssl=false' > ~/.npmrc && mkdir /app
-
+FROM nginx:latest
 
+RUN mkdir -p /app
 WORKDIR /app
 
-COPY . .
-
-RUN yarn && yarn build
+COPY dist /usr/share/nginx/html
 
-EXPOSE 3010
+EXPOSE 80
 
-CMD ./start.sh

Dockerfile.ssr

@@ -0,0 +1,17 @@
+FROM node:fermium-buster-slim
+
+RUN echo 'registry=https://registry.npm.taobao.org/ \
+ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ \
+ELECTRON_BUILDER_BINARIES_MIRROR=https://pan.yasking.org/electron-builder/ \
+strict-ssl=false' > ~/.npmrc && mkdir /app
+
+
+WORKDIR /app
+
+COPY . .
+
+RUN yarn && yarn build
+
+EXPOSE 3010
+
+CMD ./start.sh

layouts/empty.vue

@@ -0,0 +1,21 @@
+<template>
+  <div style="padding: 0;margin: 0; overflow: hidden;">
+    <div id="nav-parent">
+      <Navbar/>
+    </div>
+    <div>
+      <Nuxt />
+    </div>
+    <div style="margin: 0;padding: 0;">
+      <Footer/>
+    </div>
+  </div>
+</template>
+<script>
+import '@/assets/css/main.scss'
+
+export default {
+  name: "empty",
+
+}
+</script>

layouts/error.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="error-page-container">
+    <h1 class="error-title" v-if="error.statusCode === 404">页面未找到</h1>
+    <h1 class="error-title" v-else>发生了一个内部错误</h1>
+    <NuxtLink class="error-nav-link" to="/">回到主页</NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'error',
+  layout: 'empty', //OR layout:'default'
+  props: {
+    error: {
+      type: Object,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.error-page-container {
+  min-height: 71vh;
+  overflow: hidden;
+}
+.error-title {
+  text-align: center;
+  margin-top: 25vh;
+}
+.error-nav-link {
+  text-decoration: none;
+  color: #1ccb4c;
+  text-align: center;
+  margin-left: 46%;
+}
+</style>

nuxt.config.js

@@ -25,14 +25,35 @@ export default {
     port: 3010, //线上端口
     host: '0.0.0.0'
   },
+  // generate: {
+  //   routes(callback) {
+  //     const routeWiki = traverseDirectories('content/wiki')
+  //     const routeNews = traverseDirectories('content/news')
+  //     const routes = [...routeWiki,...routeNews]
+  //     callback(null,routes)
+  //   }
+  // },
   generate: {
-    routes(callback) {
-      const routeWiki = traverseDirectories('content/wiki')
-      const routeNews = traverseDirectories('content/news')
-      const routes = [...routeWiki,...routeNews]
-      callback(null,routes)
+    async routes() {
+      const { $content } = require('@nuxt/content')
+
+      const blogRoutes = await $content('wiki').only(['slug']).fetch()
+        .then(files => {
+          return files.map(file => `/wiki/${file.slug}`)
+        })
+
+      const newsRoutes = await $content('news').only(['slug']).fetch()
+        .then(files => {
+          return files.map(file => `/news/${file.slug}`)
+        })
+
+      return [...blogRoutes, ...newsRoutes]
     }
   },
+  router: {
+    trailingSlash: false,
+    mode: 'hash'
+  },
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     title: 'nuxt-frontend',

pages/news/_page.vue

@@ -65,27 +65,28 @@ export default {
       }
     },
     async fetchData() {
+
       const params = this.$router.currentRoute.params
-      console.log(params)
-      const article = await this.$content('news',
-        params.page).fetch()
-      this.article = JSON.parse(JSON.stringify(article))
-      this.$nextTick(() => {
-        this.addChild('nuxt-content-highlight')
-      })
+      console.log(params,"params")
+      let article = {}
+      try {
+        article = await this.$content('news',
+          params.page).fetch()
+        this.article = JSON.parse(JSON.stringify(article))
+        this.$nextTick(() => {
+          this.addChild('nuxt-content-highlight')
+        })
+      } catch (e) {
+        this.$nuxt.error({
+          statusCode: 404,
+          message: 'Page not found'
+        })
+      }
     },
   },
   async fetch() {
     await this.fetchData()
-
-
   },
-
-  // mounted() {
-  //   setTimeout(() => {
-  //     this.addChild('nuxt-content-highlight')
-  //   }, 100)
-  // }
 }
 </script>
 

pages/wiki/index/_slug.vue

@@ -47,9 +47,18 @@ export default {
     },
     async fetchData() {
       const params = this.$router.currentRoute.params
-      const article = await this.$content('wiki',
-        params.slug).fetch()
-      this.article = JSON.parse(JSON.stringify(article))
+      try {
+        const article = await this.$content('wiki',
+          params.slug).fetch()
+        this.article = JSON.parse(JSON.stringify(article))
+      }
+      catch (e) {
+        this.$nuxt.error({
+          statusCode: 404,
+          message: 'Page not found'
+        })
+      }
+
 
     },
   },