nuxt3项目搭建相关
- [1. 创建项目](#1. 创建项目)
- [2. 配置环境变量](#2. 配置环境变量)
1. 创建项目
            
            
              powershell
              
              
            
          
          npx nuxi@latest init <project-name>2. 配置环境变量
环境变量文件

package.json配置启动项
            
            
              js
              
              
            
          
          {
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build --dotenv .env.production",
    "build:dev": "nuxt build --dotenv .env.development",
    "build:test": "nuxt build --dotenv .env.test",
    "dev": "nuxt dev --dotenv .env.development --exec",
    "test": "nuxt dev --dotenv .env.test --exec",
    "prod": "nuxt dev --dotenv .env.production --exec",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.14.1592",
    "vue": "latest",
    "vue-router": "latest"
  }
}nuxt.config.ts配置
            
            
              js
              
              
            
          
          // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      APP_BASE_API: process.env.VITE_APP_BASE_API,
      APP_OPERATION_URL: process.env.VITE_APP_OPERATION_URL,
    }
  },
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true }
})在页面使用
两种方式
            
            
              html
              
              
            
          
          <template>
  <div>
    {{ env.VITE_APP_BASE_API }}
    {{ APP_BASE_API }}
  </div>
</template>
<script lang="ts" setup>
const env = import.meta.env;
import { useRuntimeConfig } from '#app'
const config = useRuntimeConfig()
const APP_BASE_API = config.public.APP_BASE_API
</script>