Nuxt3 config配置 - Githubissues

ddd-000 commented 2 years ago

https://57code.github.io/nuxt3-docs-zh/directory-structure/nuxt-config.html

ddd-000 commented 2 years ago

privateRuntimeConfig

运行时配置允许向nuxt应用上下文传递动态配置和环境变量（server）
此对象的值只能通过$config从服务器访问
在服务器端覆盖publicRuntimeConfig相同内容

publicRuntimeConfig

运行时配置允许向nuxt应用上下文传递动态配置和环境变量（server & client）
此对象的值只能通过$config从服务器和客户端访问

在nuxt.config.ts中配置

 // client和server
  publicRuntimeConfig: {
    BASE_URL: process.env.BASE_URL,
    API_AUTH_TOKEN: process.env.API_AUTH_TOKEN
  },
  // 仅在server端
  privateRuntimeConfig: {
    API_SECRET: process.env.API_SECRET
  },

通过process.env可以取到.xxx文件设置的url

//.env
BASE_URL=https://nuxtjs.org
API_SECRET=api_secret_token
API_AUTH_TOKEN=api_auth_token

$config

{ 
  "BASE_URL": "https://nuxtjs.org", 
  "API_AUTH_TOKEN": "api_auth_token", 
  "app": { "baseURL": "/", "buildAssetsDir": "/_nuxt/", "assetsPath": {}, "cdnURL": null }
 }

访问$config

//在context上下文中可以访问
const { data } = await useAsyncData('count', ({ $config }) => {
    $fetch(`${$config.BASE_URL}/api/count`)
})

//or
const config = useRuntimeConfig() 
//这个方法返回的就是$config，$config可以直接从this中获取
{{config.BASE_URL}}

//this里可以访问
console.log(this.$config.BASE_URL)
{{ $config.BASE_URL}}

ddd-000 commented 2 years ago

模块modules

modules: [
  // 使用包名
  "@nuxtjs/axios",
  // 与项目 srcDir 地相对路径
  "~/modules/awesome.js",
  // 携带配置选项
  ["@nuxtjs/google-analytics", { ua: "X1234567" }],
  // 内联函数
  function () {},
]

和buildModules的区别： buildModules是用来配置仅在开发和构建期需要的模块

buildModules: ['@nuxtjs/tailwindcss'],
modules: [
    'nuxt-device-module',
    '@nuxtjs/dayjs',
    '@nuxtjs/axios',
    '@nuxtjs/svg'
],

ddd-000 commented 2 years ago

vite

设置将直接传递给Vite的配置

vite: {
  xxx: xxx
}

vite是啥？基于原生ES-Module的前端构建工具

特点是啥？

快速的冷启动
即时的模块热更新
真正的按需编译

利用es6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间

ddd-000 commented 2 years ago

https://57code.github.io/nuxt3-docs-zh/directory-structure/nuxt-config.html#servermiddleware

serverMiddleware

不要将 serverMiddleware 添加到 middleware/ 目录。中间件由 webpack 捆绑到您的生产包中并在 beforeRouteEnter 上运行。如果您将 serverMiddleware 添加到 middleware/ 目录，Nuxt 将错误地将其拾取为中间件，并将错误的依赖项添加到您的包或生成错误。

情况一

在server-middleware下新建index.js

export default function (req, res, next) {
  // req 是 Node.js http 请求对象
  console.log('拿到servermiddleware',req.url)
  // res 是 Node.js http 响应对象
  // next 是调用下一个中间件的函数
  // 如果您的中间件不是最后一个，请不要忘记在最后调用 next！
  next()
}

nuxt.config.ts下配置

serverMiddleware: [
    '~/server-middleware/index'  //全局配置，所有路径下都执行
  ]
服务端能打印出结果

情况二在server-middleware下新建rest.js


// const app = require('express')();
import express from 'express'
const app = express()
app.get('/hello', (req, res) => {
res.send('Hello World!')
})

export default app


> 用require引入方式会报错，俺也不知道为啥，大概是因为es module？

nuxt.config.ts下配置

serverMiddleware: [ { path: "/server-middleware", handler: "~/server-middleware/rest.js" }, '~/server-middleware/index' ], //这里的path是路径


![image](https://user-images.githubusercontent.com/58555605/157585477-031b8b92-5a95-4744-b39e-efabe4fff5bc.png)

> 与middleware的区别：
middleware：https://v3.nuxtjs.org/docs/directory-structure/middleware

**middleware是路由中间件--在vue的部分运行，serverMiddleware是服务器中间件--在vue渲染之前运行**
middleware的使用：

1. 动态添加中间件(全局和命名均可)--plugin文件夹下

export default defineNuxtPlugin(() => { addRouteMiddleware('global-test', () => { console.log('this global middleware was added in a plugin') }, { global: true })

addRouteMiddleware('named-test', () => { console.log('this named middleware was added in a plugin') }) })

2. 在middleware文件夹下

- 全局（.global后缀才可以哦）

//index.global.js export default defineNuxtRouteMiddleware((to, from) => { console.log('全局路由中间件',from,to) })


- 命名

export default defineNuxtRouteMiddleware((to, from) => { console.log('页面路由中间件',to) })

ddd-000 commented 2 years ago

meta设置： 1.全局设置

meta: {
    title: '新片场素材',
    meta: [
      { title: '新片场素材' },
      { charset: 'utf-8' },
      { hid: 'keywords', name: 'keywords', content: '新片场素材,素材标签,Pond5,广告音乐,音乐素材,视频素材,实拍视频,片头素材,空镜素材,罐头音乐,背景音乐,BGM下载,正版图片,正版图库,正版素材,商用图片,商业图片,商用图库,矢量素材,AE模板,免费素材' },
      { name: 'viewport', content: 'width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css' },
      { rel: 'icon', type: 'image/x-icon', href: 'https://www.xinpianchang.com/favicon/favicon.ico' },

    ],
    script: [
      {
        src: 'https://lib.baomitu.com/vConsole/3.0.0/vconsole.min.js'
      },
      {
        src: 'https://lib.baomitu.com/vue/2.5.13/vue.min.js'
      }
    ],
  },

2.单个页面配置

// layouts/default.vue
<script setup>
const route = useRoute()
useMeta({
  title: computed(() => `${route.meta.title}`)
})
</script>

// xxx.vue
definePageMeta({
  title: '给这个页面起个标题吧'
})

xinpianchang / fe-weekly

Nuxt3 config配置 #126

privateRuntimeConfig

publicRuntimeConfig

模块modules

vite

serverMiddleware