From e50fd575281714715d28491bf9360ea74a37d82c Mon Sep 17 00:00:00 2001 From: weearc Date: Sun, 2 Apr 2023 02:54:03 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fix=20routing=20error=20a?= =?UTF-8?q?nd=20add=20error=20page=20and=20handler?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. fix dynamic routing , change route mode to hash and avoid specific route from slug unknown BREAKING CHANGE: 🧨 route mode changed ✅ Closes: #8 --- Dockerfile | 16 ++++------------ Dockerfile.ssr | 17 +++++++++++++++++ layouts/empty.vue | 21 +++++++++++++++++++++ layouts/error.vue | 36 ++++++++++++++++++++++++++++++++++++ nuxt.config.js | 31 ++++++++++++++++++++++++++----- pages/news/_page.vue | 31 ++++++++++++++++--------------- pages/wiki/index/_slug.vue | 15 ++++++++++++--- 7 files changed, 132 insertions(+), 35 deletions(-) create mode 100644 Dockerfile.ssr create mode 100644 layouts/empty.vue create mode 100644 layouts/error.vue diff --git a/Dockerfile b/Dockerfile index 62c3f2a..94db6d1 100644 --- a/Dockerfile +++ b/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 diff --git a/Dockerfile.ssr b/Dockerfile.ssr new file mode 100644 index 0000000..62c3f2a --- /dev/null +++ b/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 diff --git a/layouts/empty.vue b/layouts/empty.vue new file mode 100644 index 0000000..0d94a32 --- /dev/null +++ b/layouts/empty.vue @@ -0,0 +1,21 @@ + + diff --git a/layouts/error.vue b/layouts/error.vue new file mode 100644 index 0000000..b8a5d58 --- /dev/null +++ b/layouts/error.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/nuxt.config.js b/nuxt.config.js index 1f582ae..4fa8e62 100644 --- a/nuxt.config.js +++ b/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', diff --git a/pages/news/_page.vue b/pages/news/_page.vue index cef3ca1..f3e1be3 100644 --- a/pages/news/_page.vue +++ b/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) - // } } diff --git a/pages/wiki/index/_slug.vue b/pages/wiki/index/_slug.vue index af85f53..28329f6 100644 --- a/pages/wiki/index/_slug.vue +++ b/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' + }) + } + }, },