SSR项目模板

适用于期望SEO友好的，内容主导型网站，如:公司官网、外贸官网、个人博客等

技术站

NUXT3 + vite4 + pinia + typescript +eslint

目录结构

使用

下载仓库

git clone https://github.com/eq1024/nuxt-template.git

安装依赖

yarn -v 	// 1.22.19
node -v		//v16.20.0
yarn

运行项目

yarn dev	//  > Local:    http://localhost:3000/

打包项目

yarn build //输出在.nuxt项目

说明

环境变量的使用

官方方法

在官方文档中有使用说明，首先在nuxt.config.ts首层中添加如下内容，ts会自动补全

  runtimeConfig: {
    public: {
      BASE_URL: 'example url',
      test: 'test value',
    },
  },

然后再项目中使用

const config = useRuntimeConfig()
console.log('BASE_URL', config.public.BASE_URL)	 // example url
console.log('test', config.public.test)	 // test value

dotenv使用

在项目根目录创建 .env.dev和.env.production,然后修改package.json中的运行指令如下

  "scripts": {
    "build": "nuxi build --dotenv .env.production",
    "dev": "nuxi dev --dotenv .env.dev"
  	}

添加如下字段到dotenv文件中

// .env.dev
NUXT_BASE_ROOT = 'https://baidu.com'

//.env.production
NUXT_BASE_ROOT = 'https://bing.com'

在nuxt.config.ts首层中添加如下内容

  runtimeConfig: {
    public: {
      BASE_URL: process.env.NUXT_BASE_ROOT,
    },
  },

然后再项目中使用

const config = useRuntimeConfig()
console.log('BASE_URL', config.public.BASE_URL)	 //  https://baidu.com 或 https://bing.com

请求封装

注意:针对首次请求完成的后续异步请求,NUXT3官方不推荐继续在nuxt项目中引入和使用axios,提倡使用NUXT3的$fetch

更多详细使用见NUXT3的原请求库ofetch

type fetchType = typeof $fetch
type ReqType = Parameters<fetchType>[0]
type FetchOptions = Parameters<fetchType>[1]
type BodyType = RequestInit['body']

export function useRequest<T = unknown>(
  request: ReqType,
  opt: FetchOptions,
  body?: BodyType,
) {
  // const router = useRouter()
  // const route = useRoute()
  const config = useRuntimeConfig()
  const token = useCookie('token')
  const defaultopt = {
    method: 'post',
    baseUrl: config.public.BASE_URL,
    Headers: { token: token.value },
    body,
    onResponseError({ response }) {
      console.log('cuowu', response)
    },
    async onResponse({ request, response, options }) {
      // Log response
      console.log('[请求返回]', request, response.status, response.body)
    },
    async onRequest({ request, options }) {
      // Log request
      console.log('[发送请求]', request, options)
      options.query = options.query || {}
      options.query.t = new Date()
    },
  } as FetchOptions
  return $fetch<T>(request, useMerge(defaultopt, opt))
}

其他NUXT功能已提供示例,具体使用见官方文档

路由守卫

/middleware目录下已.global.ts结尾的函数将自动在全局路由时执行

// 文件名的 global 表示全局所以路由都会执行
export default defineNuxtRouteMiddleware((to, from) => {
  // const auth = useState('auth')
  console.log('全局触发路由 from:', from, ' to:', to,
  )
})

非global文件需要在组件中指定

definePageMeta({
  middleware: ['root-middle'], // 指定执行
})

liu-huitao/nuxt-template

SSR项目模板

技术站

目录结构

使用

说明

环境变量的使用

请求封装