NuxtJS基础应用

1 基础文档

NuxtJS官方文档
Vue SSR 指南
nuxt/i18n

2 对Nuxt的基本认知

2.1 Nuxt是什么

Next.js，一个 React 的服务端渲染应用框架。

Nuxt.js，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架。
是一个灵活的应用框架，可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

特性

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES2015+ 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus 等等
支持 HTTP/2 推送

流程图
Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 切换路由渲染页面）的流程：

2.2 为什么使用Nuxt

【多页应用】：页面跳转→返回HTML
优点：首屏时间快，SEO效果好
(优：访问一个页面的时候，服务器返回一个html然后页面就会被展示出来，这个过程经历了一个http请求，请求回来了页面也就展示出来了，所以页面展示的速度非常的快)
(优：搜索引擎在做网页排名的时候需要知道网页的内容，才能给网页权重来进行网页的排名，搜索引擎可以识别html的内容，而我们网页所有的内容都放在html之中，所以SEO效果好)

【单页应用】：页面跳转→JS渲染
缺点：首屏时间稍慢，SEO(搜索引擎优化)差
(缺：单页首屏展示出来需要请求一次html，同时还需要发一个js的请求，2个请求都回来了首屏才会展示出来)
(缺：搜索引擎认识html中的内容，不认识js的内容，单页页面所有内容都是靠JS渲染生成的，搜索引擎不识别这一块的内容，它就不给你的网页一个好的排名)

3 Nuxt基础应用

3.1 相关配置了解

3.1.1 head

meta、link、script

3.1.2 router

3.1.3 plugins

3.1.4 build

3.1.5 css

3.1.6 其他更详细的移步文档

Nuxt配置

3.2 路由

3.3 请求异步数据

3.3.1 asyncData 方法

3.3.2 fetch 方法

3.4 i18n配置

流程和这篇博客类似，区别待研究：
https://blog.csdn.net/m0_52714582/article/details/119332797

1）

npm install vue-i18n

2）
i18n.nuxtjs - Lang Switcher

①middleware/i18n.js

import {
  setCookie
} from "../utils/cookie"

export default ({
  app,
  $fullPath,
  error
}) => {
  try {
    let langCode = 'zh_CN'
    if ($fullPath.includes('/hk')) {
      langCode = 'zh_HK'
    }
    app.i18n.setLocale(langCode)
    // 客户端设置cookie--为了使客户端请求接口时带上cookie
    if (!process.server) setCookie('lang', langCode)
  } catch (e) {
    console.error('中间件：i18n 异常', e)
    error({
      statusCode: 404,
      message: '服务器异常！程序员拼命修复中'
    })
  }
}

②具体组件中执行切换语言操作：

    // 切换语言 - 简繁体切换
    switchLang(lang, type) {
      const currentLang = this.$i18n.locale === 'zh_HK' ? 'hk' : 'cn';
      if (lang === currentLang) {
        location.reload();
        return;
      }
      let path = this.$route.path;
      if (lang === 'cn') {
        path = path.replace('/hk', '') || '/';
        window.location.replace(window.location.origin + path);
      } else if (lang === 'hk') {
        if (path === '/') {
          path = '';
        }
        path = '/hk' + path;
        window.location.replace(window.location.origin + path);
      }
    },

3）增加locales文件夹；并且创建zh_CN.json、zh_HK.json和en_US.json文件。
①data/enum/index.js

export const langType = {
  enUS: 'en_US',
  zhHK: 'zh_HK',
  zhCN: 'zh_CN'
}

②data/i18n/locales/en_US.json
i18n/locales/zh_HK.json
i18n/locales/zh_CN.json
里面存放对应的语言内容

③data/i18n/index.js

import { langType } from '../enum'

import enUS from './locales/en_US'
import zhCN from './locales/zh_CN'
import zhHK from './locales/zh_HK'

export const locales = {
  [langType.enUS]: enUS,
  [langType.zhHK]: zhHK,
  [langType.zhCN]: zhCN
}

④utils/i18n.js – 整合③的语言文件到这里啦

import { locales } from '../data/i18n'

/**
 * 获取语言集合
 */
export function getMessages () {
  return locales
}

4）配置nuxt.config.js文件

 router: {
    middleware: ['i18n']
  },
// plugins: ['@/plugins/i18n.js'],

buildModules:['nuxt-i18n']

import { getMessages } from './utils/i18n';

  i18n: {
    locales: ['zh_CN', 'zh_HK', 'en_US'],
    defaultLocale: 'zh_CN',
    strategy: 'no_prefix',
    vueI18n: {
      fallbackLocale: 'zh_CN',
      messages: getMessages(),
    },
    // detectBrowserLanguage: {
    //   useCookie: true,
    //   cookieKey: 'lang',
    //   // cookieCrossOrigin: true
    // }
  },

5）使用i18n

A.

• ①Vue组件的html里使用：{{ $t('common.text_1') }}
• ②Vue组件的js里使用(区分客户端和服务端)：
  客户端：this.$t('common.text_1')
  服务端：app.i18n.t('common.text_1')
• 纯js文件里面使用(没报错$nuxt not defined, 具体这样使用合不合适待研究)：

 if(process.client){
 text = $nuxt.$t('common.text_2')
}

B.
获取语言:
客户端：const lang = this.$i18n.locale; // 'zh_CN / 'zh_HK / 'en_US'
服务端：const lang = app.i18n.locale; // 'zh_CN / 'zh_HK / 'en_US'

3.5 记录一些曲折

• 只在page文件夹下的vue文件使用asyncData方法才生效！子组件不生效！