Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 文章/发布部署

本文链接：https://blog.youkuaiyun.com/qq_45149256/article/details/112227426

本文详细介绍了如何在Vue.js框架NuxtJS中实现文章详情页面，包括展示基本信息、Markdown转HTML、作者信息、SEO优化和评论列表的客户端渲染。此外，还讲解了NuxtJS项目的发布部署过程，涵盖打包、最简单部署、使用PM2管理和自动化部署，特别是通过GitHub Actions实现自动部署的配置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

11.5 文章详情

展示基本信息

在这里插入图片描述

请求方法：GET

请求地址：/api/articles/:slug

api/article.js

// 获取文章详情
export const getArticle = slug => {
   
  return request({
   
    method: 'GET',
    url: `/api/articles/${
     slug}`
  })
}

pages/article/index.vue

import {
    getArticles } from '@/api/article'

export default {
   
  name: 'ArticleIndex',
  async asyncData ({
    params }) {
   
    const {
    data } = await getArticles(params.slug)
    console.log(data)
  }
}

在这里插入图片描述

export default {
   
  name: 'ArticleIndex',
  async asyncData ({
    params }) {
   
    const {
    data } = await getArticles(params.slug)
    return {
   
      article: data.article
    }
  }
}

<h1>{
   {
    article.title }}</h1>

...
<div class="row article-content">
  <div class="col-md-12">{
   {
    article.body }}</div>
</div>

在这里插入图片描述

把Markdown转为HTML

markdown-it：将Markdown文档转换为Html

npm install markdown-it --save

在文章的详情页面加载包pages/article/index.vue

import MarkdownIt from 'markdown-it'

export default {
   
  name: 'ArticleIndex',
  async asyncData ({
    params }) {
   
    const {
    data } = await getArticle(params.slug)
    const {
    article } = data
    const md = new MarkdownIt
    article.body = md.render(article.body)
    return {
   
      article: article
    }
  }
}

在这里插入图片描述

<div class="row article-content">
  <div class="col-md-12" v-html="article.body"></div>
</div>

在这里插入图片描述

展示文章作者相关信息

效果图：

在这里插入图片描述

模板：

<div class="article-meta">
  <a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
  <div class="info">
    <a href="" class="author">Eric Simons</a>
    <span class="date">January 20th</span>
  </div>
  <button class="btn btn-sm btn-outline-secondary">
    <i class="ion-plus