Nuxt3 区分环境和视图层

区分环境

新建

根目录新建三个文件分别是

• .env.development

• .env.production

• .env.test

├── app
│ ├── components
│ ├── layouts
│ ├── pages
│ ├── plugins
│ ├── styles
│ ├── utils
│ └── composables
├── assets
├── composables
├── layouts
├── pages
├── plugins
├── public
├── styles
├── .env.development
├── .env.production
├── .env.test
├── nuxt.config.ts
└── package.json

里面分别写

.env.development

# 环境变量
VITE_MODE=development
# 基地址
VITE_BASE_URL=xxx.com

.env.production

# 环境变量
VITE_MODE=production
# 基地址
VITE_BASE_URL=xxx.com

.env.test

# 环境变量
VITE_MODE=development
# 基地址
VITE_BASE_URL=xxx.com

package.json 配置

 "build": "nuxt build --dotenv .env.production",
 "build:dev": "nuxt build --dotenv .env.development",
 "serve": "nuxt dev --dotenv .env.development",
 "preview": "nuxt preview --dotenv .env.production",
 "servepro": "nuxt dev --dotenv .env.production",

nuxt.config.ts 配置

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  // 测试环境读取
  runtimeConfig: {
    // 仅仅在服务端
    baseUrl: process.env.VITE_BASE_URL,
    // 客户端也读取
    public: {
      baseUrl: process.env.VITE_BASE_URL,
    },
  },
  // 这里是方便生产环境读取
  appConfig: {
    mode: process.env.VITE_MODE,
    baseUrl: process.env.VITE_BASE_URL,
  },
});

页面调用

这里最好用 useAppconfig 因为不用他生产环境掉不出来

<script setup lang="ts">
  console.log(useRuntimeConfig());
  console.log(useAppConfig().baseUrl); // const
  runtimeConfig = useRuntimeConfig(); // console.log(runtimetimeConfig);
</script>

视图层

布局

• 修改 app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts"></script>

创建 layouts 文件夹

里面两个文件

├── layouts
│   ├── default.vue
│   ├── login.vue

• login.vue

<template>
  <div>
    <div>登录布局</div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

• default.vue

<template>
  <div>
    <div>默认布局</div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

新建 pages 文件夹

下面新建 index.vue, admin.vue, login.vue

├── pages
│   ├── index.vue
│   ├── login.vue
│   ├── admin.vue

• index.vue

<template>
  <div>首页</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

• login.vue(指定 layout)

<template>
  <div>登录页面内容</div>
</template>

<script setup lang="ts">
  definePageMeta({
    layout: "login",
  });
</script>

<style scoped></style>

• admin.vue

<template>
  <div>默认页面页面内容</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

新建 components 文件夹

下面新建目录如下

├── components
│   ├── sidebar
│   │   ├── content
│   │   │   ├── sidebarcontent.vue
│   ├── testindex
│   │   ├── header.vue

Nuxt 做了自动导入可以直接使用

<template>
    <div>
        首页
        <TestindexHeader></TestindexHeader>
        <SidebarContentSidebarcontent></SidebarContentSidebarcontent>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>