nuxt3 多环境、快速启动

最新推荐文章于 2025-05-30 14:34:51 发布

灯火_

最新推荐文章于 2025-05-30 14:34:51 发布

阅读量587

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_49070128/article/details/143025157

配置本地环境(.env.dev)和线上环境(.env)

.env 或.env.dev文件

# 接口路径
BASIC_URL = 'https://xxxx.com'
# 上传地址
UPLOAD_URL = 'http://upload.xxx.com'

nuxt.config.ts 配置代理和环境变量

export default defineNuxtConfig({
	...
	nitro: {
    devProxy: {
      "/api": {
        target: process.env.BASIC_URL,
        // autoRewrite: true, // 移除请求路径中的 '/api' 前缀  
        prependPath: true,
        changeOrigin: true,
      }
    },
    routeRules: {
      "/api/**": {
        proxy: process.env.BASIC_URL + "/**"
      }
    }
  },
runtimeConfig: {
    public: {
      // 上传接口
      uploadUrl: process.env.UPLOAD_URL
    }
  },
})

页面中使用

<script lang="ts" name="Editor" setup>
const config = useRuntimeConfig()
// 上传接口
const uploadUrl = config.public.uploadUrl
</script>

package.json 下配置 .env.dev 和 .env 的快速启动

  "scripts": {
    "build": "nuxt build",
    "build:dev": "nuxt build --dotenv .env.dev",
    "prod": "nuxt dev",
    "dev": "nuxt dev --dotenv .env.dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },