nuxt3项目搭建相关
- 1. 创建项目
- 2. 配置环境变量
- 环境变量文件
- package.json配置启动项
- nuxt.config.ts配置
- 在页面使用
1. 创建项目
npx nuxi@latest init <project-name>
2. 配置环境变量
环境变量文件
package.json配置启动项
{"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配置
// 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 }
})
在页面使用
两种方式
<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>
