nuxt3 多环境、快速启动

配置本地环境(.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"
  },

原文地址：https://blog.csdn.net/weixin_49070128/article/details/143025157

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！