nuxtjs设置环境变量

最新推荐文章于 2025-05-30 09:05:40 发布

强身健体，清神醒脑

最新推荐文章于 2025-05-30 09:05:40 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： nuxt Vue 文章标签： nuxt node.js

本文链接：https://blog.youkuaiyun.com/weixin_43660626/article/details/105567204

Vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

nuxt

3 篇文章

订阅专栏

本文详细介绍如何在NuxtJS项目中配置环境变量，包括创建env.js文件设置不同环境的端口和路径，修改package.json文件引入cross-env插件设置环境变量，以及调整nuxt.config.js文件使服务器端变量映射到客户端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根目录下新建env.js文件；
文件内容如下；

export default {
  dev: {
    server: {
      port: 3000, // default: 3000
      host: '0.0.0.0' // default: localhost
    }, // 项目访问路径
    api: {
      port: '', // default: 3000
      host: 'http://192.168.1.61:8080/schoolEdge'
    } // 接口路径
  },
  qa: {
    server: {
      port: 6789, // default: 3000
      host: '0.0.0.0' // default: localhost
    }, // 项目访问路径
    api: {
      port: '', // default: 3000
      host: 'http://192.168.0.246:9060/schoolEdge'
    } // 接口路径
  }
};
// 设置不同的环境端口和路径

3.修改package.json文件；

//安装cross-env插件 紧跟MODE='env' 来设置环境变量
	"dev": "cross-env MODE=dev nuxt",
    "build:uat": "cross-env MODE=uat nuxt build",
    "start:uat": "cross-env MODE=uat nuxt start",
    "build:prod": "cross-env MODE=prod nuxt build",

4.修改nuxt.config.js文件；

import env from './env';
export default {
// 服务器端变量映射到客户端
	env: {
    	MODE: process.env.MODE
  	},
  	// 设置项目启动的端口和ip
  	server: env[process.env.MODE].server,
}