【Nuxt】配置

小秀_heo

已于 2024-08-09 14:12:27 修改

阅读量439

点赞数 9

分类专栏： Vue 及其周边生态文章标签： javascript 开发语言 ecmascript

于 2024-08-03 10:56:18 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/140886885

版权

Vue 及其周边生态专栏收录该内容

117 篇文章 1 订阅

订阅专栏

runtimeConfig 运行时配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: {enabled: true},
  runtimeConfig: {
    appKey: process.env.APP_KEY,
    public: {
      baseUrl: process.env.BASE_URL,
    }
  }
});

.env ：

通过 process.env.xxx 来获取，项目运行会自动读取该文件。port 端口默认也是 3000 。

APP_KEY='your_app_key'
BASE_URL='https://api.yourwebsite.com'
PORT=3000

env 环境变量的优先级更高，如果使用 NUXT_ 开头的，其他 nuxt 配置中的环境变量会被替换：
这里的 appKey 变量值就会变为： ‘DDDDDD’。使用 NUXT_PUBLIC_BASE_URL也是同理。

app.vue

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>
<script setup>
const runtimeConfig = useRuntimeConfig()
//判断代码运行的环境
if (process.client) {
  console.log('This code is running on the client')
  // console.log(runtimeConfig.appKey) // 该属性客户端不可以访问
  console.log(runtimeConfig.public.baseUrl)
}
if (process.server) {
  console.log('This code is running on the server')
  console.log(runtimeConfig.appKey)
  // public 内属性客户端和服务器都可以访问
  // public 外属性只有服务器都可以访问
  console.log(runtimeConfig.public.baseUrl)
}

appConfig 应用配置

方法一：在 nuxt.config.ts 中进行配置

  // 应用的配置
  appConfig: {
    title: 'Nuxt 3 + TS + Vite + Pinia + Element Plus',
    theme: {
      primary: '#409EFF',
    }
  }

// 获取应用配置 任何环境都可以访问
const appConfig = useAppConfig();
// console.log(appConfig.title, appConfig.theme.primary)
onMounted(() => {
  // 会在该组件加载时改变title
  // 此时title 没有改变是因为上面引入的内部组件含有自己的 title
  document.title = appConfig.title
});

方法二：在 app.config.ts 文件中配置：

export default defineAppConfig({
    title: 'Nuxt 3 + TS + Vite + Pinia + Element Plus',
    theme: {
      primary: '#409EFF',
    }
})

实际项目中会将这两种方法合并，如果存在相同的，则 app.config.ts 文件的优先级更高。

app 配置

方法一：静态添加配置：

  // app 配置
  app: {
    // 给所有页面head添加配置(SEO, 样式, 脚本)
    head: {
      title: 'Nuxt 3',
      charset: 'utf-8',
      viewport: "width=device-width, initial-scale=1",
      meta: [
          { name: 'description', content: 'Nuxt 3 + TS + Vite + Pinia + Element Plus' },
          { name: 'keywords', content: 'Nuxt 3, TS, Vite, Pinia, Element Plus' }
      ],
      // 站点图标
      link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ],
      style: [
          { children: 'body { margin: 0; }' }
      ],
      script: [
          // { src: '/js/index.js' }
      ],
      // noscript标签 若浏览器禁用js的友好提示
      noscript: [{ children: 'Javascript is required' }]
    }
  }

在这里插入图片描述

方法二：在 app.vue 文件内为所有页面动态添加配置，优先级大于在 nuxt.config.ts 中配置：

useHead({
  title: appConfig.title,
  meta: [
    {name: 'description', content: 'My amazing site.'}
  ],
  link: [
    {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
  ],
  style: [
    {children: 'body { background-color: #f0f0f0; }'}
  ],
  script: [
    // {src: 'https://cdn.example.com/script.js'}
  ],
  bodyAttrs: {
    class: 'my-body-class'
  },
})

而且上述的配置字符串也支持动态替换(ref)。

方法三：在 vue 文件中的 template 内写 nuxt的内置组件：

    <Head>
      <Meta name="description" content="My amazing site." />
      <title>app 首页</title>
    </Head>

内置组件形式的 app 配置是三者里面最高的。

方法四：直接在 app.config.ts 中（defineAppConfig）配置。

可以使用 useAppConfig 获取。

与runtimeConfig不同，app.config.ts配置文件中的选项不能使用env环境变量来覆盖
不要将秘密或敏感信息放在app.config.ts文件中，该文件是客户端公开

router 配置

hashmode

  ssr: false, // 是否启动 ssr
  router: { // 只有在 spa 单页模式下 可以配置路由模式 默认后端渲染(SSR)为history模式
    options: {
      hashMode: true
    }
  }

alias 默认已配置，无需手动配置：

在这里插入图片描述

其他配置

modules:配置Nuxt扩展的模块，比如：@pinia/nuxt@nuxt/image
routeRules:定义路由规则，可更改路由的渲染模式或分配基于路由缓存策略
builder:可指定用vite还是webpack来构建应用，默认是vite。如切换为webpack还需要安装额外的依赖。

runtimeConfig vs appConfig

在这里插入图片描述

小秀_heo

关注

9
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Nuxt】配置

实际项目中会将这两种方法合并，如果存在相同的，则 app.config.ts 文件的优先级更高。方法四：直接在 app.config.ts 中（defineAppConfig）配置。来获取，项目运行会自动读取该文件。这里的 appKey 变量值就会变为： ‘DDDDDD’。方法一：在 nuxt.config.ts 中进行配置。而且上述的配置字符串也支持动态替换(ref)。内置组件形式的 app 配置是三者里面最高的。可以使用 useAppConfig 获取。env 环境变量的优先级更高，如果使用。
复制链接

扫一扫