Vue服务器端渲染nuxt.js初探

开头还是来一段废话： 年关将近，给大家拜个早年，愿大家年会都能抽大奖，来年行大运。

废话不多说，直接进正文。

项目环境：

前端vue项目， 需要将新增的几个路由页面做seo处理。

在调研 插件 prerender-spa-plugin后，发现无法满足 vuex 以及 plugins 等要求时，果断选用了 nuxt.js做服务器渲染。

下面是在项目中整理的 文档 和 问题

nuxt.js 是一个基于 Vue.js 的通用应用框架

它预设了利用 Vue.js 开发 服务端渲染(SSR, Server Side Render) 的应用所需要的各种配置，同时也可以一键生成静态站点。

值得一提的是，nuxt是基于node.js的，后端如果是其他语言时，是否考虑到再加一层node.js的合理性。

链接地址： https://zh.nuxtjs.org/guide/installation

利用npx脚手架创建项目

链接地址： https://zh.nuxtjs.org/guide/installation

会提供以下选项

1. 在集成的服务器端框架之间进行选择: Express / Koa ...

2. 选择您喜欢的UI框架: Bootstrap / Element UI ...

3. 选择你想要的Nuxt模式 (Universal or SPA) 普通类型 / 单页应用

4. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。

5. 添加 EsLint 以在保存时代码规范和错误检查您的代码。

6. 添加 Prettier 以在保存时格式化/美化您的代码。

注意：

1. 如果项目自带分支等git信息时， 需要将npx生产的目录里面隐藏的git 文件删除

因为npx生成文件时，默认为master 分支，类似于 gitmodule 子分支性质

2. 其中第3点，选择 Universal 时 才会默认输出静态页，也就是能够seo的，当选择spa时，则无法seo

可修改 nuxt.config.js 中的配置项 mode: 'Universal' 来定义类型

启动项目

命令： npm run dev 默认命令

这时会报错，说未指定ip 什么的，需配置项：

nuxt.config.js 中：

server: {  
// port: '3000', // 定义 输出端口 ，默认为3000  
host:'0.0.0.0' // 定义 输出 ip  
},  

注意：

在server 目录中国的index.js中 会读取 nuxt.config.js 中的配置项，当不存在时会赋值默认值

const {  
host = process.env.HOST || '127.0.0.1',  
port = process.env.PORT || 3000 // 默认配置条件下，修改此处无效 仍旧为3000端口  
} = nuxt.options.server  

页面上的注意点有：

css 都默认加载到 页面上了;

处理方式有2种：

1. 在 nuxt.config.js 文件 header 配置 link 外链这些公共样式 (下面有具体说明)

2. 在 nuxt.config.js 文件 build 配置 中 自定义文件路径 以及hash值 (下面有具体说明)

项目目录结构

1. 资源目录 (assets)

用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

2. 组件目录 (components)

用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，

即这些组件不会像页面组件那样有 asyncData 方法的特性。

3. 布局目录 (layouts) 该目录名为Nuxt.js保留的，不可更改。

用于组织应用的布局组件。

4. 中间件目录 (middleware)

目录用于存放应用的中间件

文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。

一个中间件接收 context 作为第一个参数：

具体参考： https://zh.nuxtjs.org/guide/routing#中间件

5. 页面目录 (page) 该目录名为Nuxt.js保留的，不可更改。

用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

nuxt 会根据文件夹名称以及目录结构动态生产 router， 无需额外配置。

6. 静态文件目录 (static)

用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。

服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

一般用于 放置公共css，以及 js 文件， 但是如果不想这些css和js走根目录的话，

需要将这些css放置到 assets中，然后在 nuxt.config.js中 配置 build 选项 下面会具体说明

7. Store 目录

用于组织应用的 Vuex 状态树 文件

注意： 普通的spa 项目中抛出一个实例对象即可， store为：

export default new Vuex.Store({  
actions,  
getters,  
})  

这里则需要抛出一个 实例函数对象：

const store = () => {  
return new Vuex.Store({  
state,  
getters,  
mutations,  
actions  
})  
}  
export default store  

8. nuxt.config.js

用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

9. package.json

省略...

别名

~ 或 @ // src目录

~~ 或 @@ // 根目录

默认情况下，src目录和根目录相同

页面间路由的跳转

要在页面之间使用路由，建议使用 标签。

js 中仍然可以使用 $router.push 等方法。

路由跳转时的页面间过渡效果

Nuxt.js 默认使用的过渡效果名称为 page。

（编辑：ASP站长网）