# H5前端-ssg

**Repository Path**: toolsj-open/h5-ssg

## Basic Information

- **Project Name**: H5前端-ssg
- **Description**: 前端H5版本。和web版除了排版不同，还有支付方式由微信改为支付宝
- **Primary Language**: TypeScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: https://toolsj.cn
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-11-19
- **Last Updated**: 2024-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端-H5

基于 nuxt.js 搭建的前端项目。采用 vue3+naiveUI 搭建。

最开始是用 vue3 的脚手架搭建的，但是后面了解了 SEO，vue3 对 SEO 支持不是很好，所以改用 nuxt.js。

nuxt.js 支持服务端渲染，但是服务端渲染依赖 node，我一开始就考虑到我的服务器资源是很有限的，再安装一个 node 怕内存不够用。而且需要服务器渲染耗费资源。

该网站没有什么需要动态生成的网页。所以我研究一番，发现 SSG 更合适。事实证明也行得通。

前端分两个版本：PC 和手机端 H5。框架和结构都是一致的，只是布局和支付方式不同。

## H5 端

H5 端支付使用的是支付宝支付。因为微信的 H5 支付限制更多。所以就使用支付宝支付。

H5 端还有一大问题就是兼容性，安卓的我测试了比较多，应该没啥问题。iOS 我没有测试机，都是叫亲戚朋友帮忙测试。应该也没啥大问题了。

## 构建方式

### 安装依赖

```bash
# 安装依赖
npm i
```

### 本地调试

```bash
# 本地调试
npm run dev
```

默认端口配置在`nuxt.config.js`中，默认端口为 10000。

但是，因为调试阶段，静态资源代理是 node 自带的。而后端的默认端口是 80。

但是前端向后端发起请求时，`baseURL`默认提取的是前端的端口。这肯定是请求不通的。

所以 `baseURL` 是需要调整的，而调整的代码在`/app.vue`:

```js
onMounted(() => {
    // 获取当前域名，方便后面使用
    baseUrlKey().value = window.location.origin.replace("10000", "80").replace("localhost", "127.0.0.1") + "/tools";
    // 获取高度，方便后面空间计算自己的高度
    ......
});
```

`baseURL`需要将 10000 替换为 80，将 localhost 替换为 127.0.0.1。但是这个 10000 是配置在`nuxt.config.js`中的，如果想换端口，得同步修改这两个地方才行。

### 构建生产环境

```bash
# SSG编译
npm run gen
```

编译后的文件在`/dist`目录下，将其复制到后端的静态资源目录下即可。由后端来代理静态资源。不存在上述端口的问题。

编译出来的文件，其中是有三部分：

-   普通的 html+js+css。这是最常见的
-   但是我开启了压缩，所以还得到了两种压缩格式的：`br`和`gz`。压缩文件不是必须的，但是现代浏览器和代理，都已经默认支持压缩格式了，这对于节省带宽有很大的帮助。带宽是宝贵的资源。
-   images 目录：存放一些不变的图片。有前端开发经验的朋友应该知道，一般每次编译都会给图片重命名，但是放在`/public`目录下的文件是在编译阶段原封不动的。具体可以看 nuxt.js 的文档。因为这些图片是不变的，所以没必要重命名。重命名反而导致缓存失效。

而且，我后端的代理，并不是通过文件名来判断是否变更的，而是通过文件的 md5 值来判断的。所以，如果图片名字不变没所谓，哪怕换了图片内容不换名字。

## 特别提醒

nuxt.js 框架的一大特性是自动导入。平时运行时没什么问题的。但是本地调试时，你会发现编辑器无法识别那些自动导入的东西。因为框架生成的自动导入的文件，存放在`/.nuxt/components.d.ts`文件中，你不人为打开该文件。编辑器是不会读取该文件的内容的，也就不会识别到那些导入的东西。所以，本地调试时，需要手动打开该文件一下，编辑器才能识别到那些自动导入的东西。