概况
附上nuxt官方文档 和 node API文档
接触nuxt两个多月，基本上对于服务端的渲染了解得七七八八，首先来看一下nuxt的目录结构
目录
├─assets // 静态资源文件
├─components // 组件
├─layouts // 布局文件
├─middleware // 中间件
├─pages // 页面目录文件
├─plugins // 插件
├─server // 这个可以作为启动项目文件
├─static // 静态文件
├─store // 组织应用的 Vuex 状态树
├─nuxt.config.js // 配置文件
└─package.json // 依赖包等
nuxt的目录结构很清晰，看名字也大概能够知道。使用nuxt和单纯使用vue很大的一个区别就是不需要你手动注册路由，你只需要把你的文件在pages目录下面创建好，nuxt编译的时候就会自动帮你注册好路由。编译好的项目下面有一个文件夹.nuxt，可以看到router.js文件。
可以看到是webpack打包的时候对不同模块进行代码分割，实现懒加载。（顺便说一下 nuxt 内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件）
说到这里大家应该就明白，如果你需要配置路由，就必须创建对应的.vue文件，那么有一种情况，对于有很多频道或者说是二级路由来说，难道需要手动创建一个一个文件然后复制粘贴吗？
看一下我目前这个项目的页面文件，实在是太多了。再者就是后期可能还会增加，目前已经有了五十多个二级目录，想了一下还是用代码来创建文件，一劳永逸，何乐不为。
node创建多个组件文件
基于node + express集成的服务器端，以下代码写在server/index.js下面，在我们 new Nuxt() 之前需要把文件创建好，这样才可以自动生成路由。
// 1. 引入fs文件系统
const fs = require('fs');
// 2. 读取一个模板内容
var dataContent = await fs.readFileSync('assets/script/modal.vue')
// 3. 读取json文件，（这个其实就是数据，一般是后端接口提供）
const fileData = require('../assets/script/fileData.json')
for (const item of fileData.data) {
for (const file of item.files) {
var path = `${item.folder}/${file.filename}.vue`;
// 1. 判断文件夹是否存在，不存在创建
var checkDir = fs.existsSync('pages/'+item.folder);
if(!checkDir){
await mkdir('pages/'+item.folder);
}
// 2. 判断文件是否存在，不存在创建
var checkFile = fs.existsSync('pages/'+path);
if(!checkFile){
// 3. 替换文件里面的内容
var content = dataContent.toString()
content = content.replace(/频道id/g,file.id)
.replace(/二级id/g,file.lid)
.replace(/标题/g,file.title)
.replace(/关键字/g,file.keywords)
.replace(/描述/g,file.description)
.replace(/频道链接/g,file.url)
// 4. 创建并写入文件
fs.writeFileSync('pages/'+path, content);
}
}
}
modal.vue模板文件
<template>
<list id="频道id" lid="二级id"></list>
</template>
<script>
export default {
head() {
return this.$seo('标题', '关键字', '描述', [{}],'频道链接')
},
components: {
list: () => import('~/components/list'),
},
}
</script>
fileData.json文件
{
"data":[
{
"folder": "story", // 文件夹名称
"files": [
{
"filename":"index", // 文件名
"id":"1996",
"lid":"01",
"title":"标题",
"keywords":"这是关键字需要替换的文本",
"description":"这是描述需要替换的文本",
"url":"频道链接https://www.baidu.com/"
}
]
},
{
"folder":"politicians",
"files":[
{
"filename":"index",
"id":"1996",
"lid":"07",
"title":"标题",
"keywords":"这是关键字需要替换的文本",
"description":"这是描述需要替换的文本",
"url":"频道链接https://www.baidu.com/"
}
]
}
]
}
这样创建好的话在pages下面就会生成两个文件夹story和politicians，里面都有一个index.vue文件，文件的内容就是modal.vue里面的内容，把你需要替换的文本替换就可以生成不一样的文件内容了。
总结
fs文件系统其实我接触的也不多，跟着官方文档的API来操作，一步一步来便可以实现。都说Node.js 是运行在服务端的 JavaScript，它很强大，就fs文件系统来说，它有各种各样的类和对应的方法，其实不需要每一个都要精通。对于node基础知识我们可以多了解，一些特定的需求我们可以一边开发一边学习。
