nuxt.config.ts 配置详解
nuxt.config.ts 文件中常见配置选项：
import type { NuxtConfig } from 'nuxt';const config: NuxtConfig = {// 全局页面标题: https://go.nuxtjs.dev/config-headhead: {title: 'My App',meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{ hid: 'description', name: 'description', content: '' }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]},// 全局 CSS: https://go.nuxtjs.dev/config-csscss: [],// 页面装载之前的插件: https://go.nuxtjs.dev/config-pluginsplugins: [],// 自动导入组件: https://go.nuxtjs.dev/config-componentscomponents: true,// 开发和构建的模块 (推荐): https://go.nuxtjs.dev/config-modulesbuildModules: [],// 模块: https://go.nuxtjs.dev/config-modulesmodules: [],// 构建配置: https://go.nuxtjs.dev/config-buildbuild: {},// 服务器配置: https://nuxtjs.org/docs/3.x/features/nuxt-server#configure-http-serverserver: {port: 3000, // 默认: 3000host: '0.0.0.0' // 默认: localhost}
}export default config;
-
head：该属性用于配置应用程序的 HTML 标头。在此处可以定义标题、元标记和链接到外部文件（例如样式表和 favicon）。
-
css：该属性用于定义应该包含在应用程序中的 CSS 文件。
-
plugins：该属性用于定义应包含在应用程序中的插件。
-
components：该属性设置是否应自动从
components/目录中导入组件。 -
buildModules：该属性用于定义应在构建过程中使用的模块（例如
@nuxt/typescript-build、@nuxtjs/tailwindcss）。 -
modules：该属性用于定义应导入到应用程序中的模块。
-
build：该属性用于配置应用程序的构建过程。您可以通过定义选项来自定义构建过程，例如输出目录、用于块和文件的文件名以及要使用的插件。
-
server：该属性用于配置 HTTP 服务器。您可以定义服务器应监听的端口和主机。
Nuxt 只认 nuxt.config.ts，因此一些大家熟悉的独立配置文件会被忽略，作为替代，nuxt.config.ts 中会有对应的配置项，如 postcss、vite、webpack.
app.config.ts 配置详解
app.config配置文件公开应用程序中的响应性配置，能够在生命周期内的运行时更新它，或者使用nuxt插件并使用HMR(热模块替换)编辑它。
export default defineAppConfig({accessKey: 'key'
})
不能把一些涉密的值放在app.config文件，可以使用.evn这样的配置文件配置环境变量，将覆盖app.config配置文件中的配置
app.config.ts 中配置
// 只能用于服务端的 keysapiKey: 'test',// 可用于客户端的 keyspublic: {apiBase: '/api'}
.evn文件,需要加NUXT_前缀，且需要转为大写
NUXT_API_KEY=api_token
NUXT_PUBLIC_API_BASE=https://test.com
端口号配置
{"scripts": {"dev": "nuxt dev --port=8080"}
}
useHead
Nuxt 提供了一个 useHead() 可以在组件内修改 meta 信息
<script setup lang="ts">
useHead({title: 'My App',meta: [{ name: 'description', content: 'My site.' },{ name: 'keywords', content: 'nuxt、nuxt3、vue' }],bodyAttrs: {test: 'test'},script: [ { children: 'console.log('Hello world')' } ]
})
</script>可在每个页面单独设置信息
useHead({title: '文章详情'
})
可以设置标题模板
<script setup lang="ts">
useHead({titleTemplate: (title) => {return title ? `${title} - 我的网站` : "我的网站";},
});
</script>这样子页面如果设置了title，就能拼接上该模板，一起展示。
Nuxt 还提供了多种组件可以在模板中设置具体页面页头信息：
<Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> , <Head>
本文链接：https://my.lmcjl.com/post/982.html
4 评论