mmf-blog-vue2-ssr 项目教程

mmf-blog-vue2-ssr 项目教程

mmf-blog-vue2-ssrmmf-blog-vue2 ssr(The service side rendering)项目地址:https://gitcode.com/gh_mirrors/mm/mmf-blog-vue2-ssr

1. 项目的目录结构及介绍

mmf-blog-vue2-ssr/
├── api/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── services/
├── client/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── plugins/
│   ├── router/
│   ├── store/
│   ├── utils/
│   └── App.vue
│   └── main.js
├── config/
│   ├── default.js
│   ├── development.js
│   └── production.js
├── server/
│   ├── middleware/
│   ├── routes/
│   └── index.js
├── test/
│   ├── client/
│   └── server/
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• api/: 包含后端API的控制器、模型、路由和服务。
• client/: 包含前端Vue.js应用的资源、组件、布局、页面、插件、路由、状态管理等。
• config/: 包含项目的配置文件，如默认配置、开发环境配置和生产环境配置。
• server/: 包含服务端的路由和中间件。
• test/: 包含客户端和服务端的测试文件。
• .babelrc: Babel配置文件。
• .eslintrc.js: ESLint配置文件。
• .gitignore: Git忽略文件配置。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• yarn.lock: Yarn锁定文件。

2. 项目的启动文件介绍

客户端启动文件

client/main.js 是客户端的入口文件，负责初始化Vue实例并挂载到DOM上。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

服务端启动文件

server/index.js 是服务端的入口文件，负责启动服务器并处理请求。

const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('../dist/vue-ssr-server-bundle.json')
const clientManifest = require('../dist/vue-ssr-client-manifest.json')

const app = express()

const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./index.template.html', 'utf-8'),
  clientManifest
})

app.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

app.listen(8080, () => {
  console.log('Server is running at http://localhost:8080')
})

3. 项目的配置文件介绍

配置文件目录

config/ 目录下包含项目的配置文件。

默认配置

config/default.js 包含项目的默认配置。

module.exports = {
  port: 8080,
  db: {
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'mmf_blog'
  }
}

开发环境配置

config/development.js 包含开发环境的配置。

module.exports = {
  db: {
    host: 'localhost',
    user: 'dev_user',
    password: 'dev_password',
    database: 'mmf_blog_dev'
  }
}

生产

mmf-blog-vue2-ssrmmf-blog-vue2 ssr(The service side rendering)项目地址:https://gitcode.com/gh_mirrors/mm/mmf-blog-vue2-ssr