NuxtJS3配置多环境变量

最新推荐文章于 2024-06-04 10:06:44 发布

猫在裙角jslms

最新推荐文章于 2024-06-04 10:06:44 发布

阅读量1.3k

点赞数 4

分类专栏： NuxtJS3 文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_34661750/article/details/135999797

版权

NuxtJS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.在根目录添加开发环境.env.development

# 本地环境
NODE_ENV = development
VUE_APP_NUXT_API_URL = /api
NUXT_BASE_PORT = 3000
NUXT_BASE_LINK = http://192.168.21.80:6000
NUXT_SYSTEM_TITLE = xx管理系统

2.在根目录添加测试环境.env.test

# 测试环境
NODE_ENV = test
NUXT_API_URL = /official
NUXT_BASE_PORT = 3000
NUXT_BASE_LINK = http://192.168.21.80:6000
NUXT_SYSTEM_TITLE = xx管理系统

3.在根目录添加正式环境.env.production

# 生产环境
NODE_ENV = production
NUXT_API_URL = /official
NUXT_BASE_LINK = http://www.xxxx.com:6000
NUXT_BASE_PORT = 3000
NUXT_SYSTEM_TITLE = xx管理系统

4.在nuxt.config.ts中配置环境变量中的变量信息

export default defineNuxtConfig({
  devtools: { enabled: true },
  // 引入全局样式
  css: [
    "@/assets/style/main.css"
  ],
  runtimeConfig: {
    // 仅在服务器端可用的私钥
    baseUrl: '/official', 
    // 公共中的密钥也将公开给客户端
    public: {
      apiUrl: process.env.NUXT_API_URL, 
      baseLink: process.env.NUXT_BASE_LINK
    }
  },
  nitro: {
    devProxy: {
        "/api": {
            target: 'http://192.168.21.80:6000/official',
            prependPath: true,
            changeOrigin: true,
        }
    },
    // 该配置用于服务端请求转发
    routeRules: {
      '/api/**': {
        proxy: 'http://192.168.21.80:6000/official/**'
      }
    }
  }
})

5.配置package.json文件

使用 --dotenv指定环境
官网参考链接：https://nuxt.com/docs/api/commands/build

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