nuxt3项目搭建相关

nuxt3项目搭建相关

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>
相关推荐
奋飛几秒前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
_WndProc5 分钟前
【Python】Flask网页
开发语言·python·flask
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟17 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor18 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter19 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
liujing1023292921 分钟前
Day04_刷题niuke20250703
java·开发语言·算法
呆呆的心25 分钟前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了26 分钟前
看完这篇文章,你就知道什么是proxy
javascript
请你吃div27 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试