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'
}
}