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>
相关推荐
Android洋芋2 小时前
C语言深度解析:从零到系统级开发的完整指南
c语言·开发语言·stm32·条件语句·循环语句·结构体与联合体·指针基础
bjxiaxueliang2 小时前
一文详解QT环境搭建:Windows使用CLion配置QT开发环境
开发语言·windows·qt
猫猫不是喵喵.3 小时前
vue 路由
前端·javascript·vue.js
Run_Teenage3 小时前
C语言 【初始指针】【指针一】
c语言·开发语言
苹果.Python.八宝粥3 小时前
Python第七章02:文件读取的练习
开发语言·python
烛阴3 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91534 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
J不A秃V头A4 小时前
Redis批量操作详解
开发语言·redis
牛马baby4 小时前
Java高频面试之并发编程-01
java·开发语言·面试
NaZiMeKiY4 小时前
C++ 结构体与函数
开发语言·c++