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>
相关推荐
zhangfeng113336 分钟前
BiocManager下载失败 R语言 解决办法
开发语言·r语言
正义的大古1 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
CoderYanger1 小时前
MySQL数据库——3.2.1 表的增删查改-查询部分(全列+指定列+去重)
java·开发语言·数据库·mysql·面试·职场和发展
雲墨款哥1 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程1 小时前
深入JS(一):手写 Promise
前端·javascript
炮院李教员1 小时前
使用Qt Core模块(无GUI依赖),确保程序作为后台服务/daemon运行,与任何GUI完全无交互。
开发语言·qt
歪歪1002 小时前
Qt Creator 打包应用程序时经常会遇到各种问题
开发语言·c++·qt·架构·编辑器
滴滴滴嘟嘟嘟.2 小时前
Qt自定义列表项与QListWidget学习
开发语言·qt·学习
PEI042 小时前
MVCC(多版本并发控制)
java·开发语言·数据库
熊猫钓鱼>_>2 小时前
2025反爬虫之战札记:从robots.txt到多层防御的攻防进化史
开发语言·c++·爬虫