nuxt3多环境开发配置

1. 在根目录 创建 env文件夹,创建对应的环境文件,如图

nuxt3多环境开发配置_第1张图片

.env文件代码如下,注意一定要VITE_开头才能识别

VITE_BASE_URL=https://www.nuxtjs.org
VITE_API_SECRET=api_secret_token

 2.在 nuxt.config.ts 配置

import { loadEnv } from 'vite'

const envScript = process.env.npm_lifecycle_script.split(' ')
const envName = envScript[envScript.length - 1] // 通过启动命令区分环境
const envData = loadEnv(envName, 'env') as unknown as VITE_ENV_CONFIG

export default defineNuxtConfig({
 
  runtimeConfig: {
    public: {
      baseUrl: envData  // env下读取的数据
    }
  },
  
   vite: {
     envDir: '~/env', // 指定env文件夹
   }
});

3. 在utils\http.ts中调用响应的url

  const config = useRuntimeConfig()
  console.log(config)

你可能感兴趣的:(nuxt3,前端,node.js)