2021-02-16 记一次 Nuxt.js 框架的使用

官方文档：https://zh.nuxtjs.org/

关于 SSR 是什么详见：Vue.js 服务器端渲染指南

SEO 是什么：搜索引擎优化

关于为什么要做 SSR 的原因，网上也有很多文章写过了，我这里就简单提一下了。

简单来讲是为了优化首屏加载体验和优化 SEO。

由于本人擅长的是 Vue 框架，因此采用了基于 Vue 开发的 SSR 框架—— Nuxt.js。这也是 Vue 官方推荐的 SSR 框架之一，所以还是质量上还是有保障的，下面就来谈谈我使用过后的一些心得。

初始化完项目后，大概是长这个样子的，你所看到的可能与我不同，因为我还增加了一些 eslint 和 stylelint 的配置，但无妨，这不影响对于项目的讲解。

和使用 vue-cli 创建的项目不同，Nuxt.js 框架是将 src 部分之间放在了根目录，这使得项目看起来有些混乱，这也让我有些不太喜欢。

但是还是硬着头皮上了，还是得搞明白再说。

在这里要重点提的是 nuxt.config.js 文件，所有配置都在里面。（该文件会经过编译后解析，因此支持引入 es6 和 ts）

在这个配置文件中，要重点提的是 buildModules 和 axios/proxy 部分。

处理环境变量

在默认配置中，是不包括对环境变量的处理的，因此如果你像 vue-cli 工程那样直接在根目录新建 .env 文件是没用的，还需要下载 @nuxtjs/dotenv 这个包并在 nuxt.config.js 中引用。

1	npm i -S @nuxtjs/dotenv

配置反向代理

除此之外，项目中如果要访问后台 api 的话，为了避免发生跨域问题，一般是要配置反向代理的，一个简单的例子如下，和 vue.config.js 中是一模一样的。

修复 Windows 下 npm run generate 出现问题

最后在提一下部署。

Nuxt.js 有两种部署模式，一种是 server ，另一种是 static ，区别就在于 nuxt 要不要起一个 http 服务。如果你的项目与后台交互比较多，那么选择 server 模式；反之，如果是静态页面比较多，则选择 static 模式会更节约服务器性能。

两者的发布命令也不一样。

1 2	npm run build # 发布 server 版本 npm run generate # 发布 static 版本

截止目前的版本(2.15.0)，我估计 Windows 下的用户会遇到和我一样的问题：

Path *** is not in cwd ***

这个问题是 @nuxt/cli 的依赖 globby 的问题。

参考：https://github.com/sindresorhus/globby/issues/133

我看了下相关的 issue ，作者表示这个问题来自他的上游依赖 fast-glob 的问题故无法修复。

所以我只能自己 fork 一份来修改了，改动如下

// gitignore.js#48
const ensureAbsolutePathForCwd = (cwd, p) => {
	p = path.normalize(p); // 新增这一行来处理路径分隔符问题
	cwd = slash(cwd);
	if (path.isAbsolute(p)) {
		if (p.startsWith(cwd)) {
			return p;
		}

		throw new Error(`Path ${p} is not in cwd ${cwd}`);
	}

	return path.join(cwd, p);
};

参考：https://github.com/CaoMeiYouRen/globby

https://github.com/CaoMeiYouRen/nuxt-cli

改动后问题完美解决，但是我也没有提交 PR ，因为这个解决方案也实在不怎么优雅。

但秉持着能用就行的态度，我就这样用了，等待后续官方的修复。

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/7385f95.html
版权声明：转载请注明出处！