nuxt.js 多环境变量配置

目录
  • 1、前言
  • 2、场景
  • 3、创建环境
    • 3.1 注入环境变量
  • 4、最后

1、前言

一般在我们项目开发中，一般会有以下3个环境

  • 开发环境也叫测试环境(test)
  • RC环境也叫预发布环境(rc)
  • 线上环境(production)

2、场景

那么有一种情况是我们需要在不同环境下区分不同的api接口例如

  • 测试环境(test) api=test.ydhtml.com
  • 预发布环境(rc) api=rc.ydhtml.com
  • 线上环境(production) api=ydhtml.com

3、创建环境

接下来我们在项目的根目录中创建 env.js 文件内容如下

module.exports = {
    test: {
        MODE: 'test'
    },
    rc: {
        MODE: 'rc',
    },
    prod: {
        MODE: 'prod',
    }
}

配置好对应得环境之后，我们在 package.json 下得 scripts增加打包命令，

如下：

"build:test": "cross-env MODE=test nuxt build",
"build:rc": "cross-env MODE=rc nuxt build",
"build:prod": "cross-env MODE=prod nuxt build",

3.1 注入环境变量

打开nuxt.config.js 文件，增加以下代码

const env = require('./env')
module.exports = {
    env: {
        NUXT_ENV: env[process.env.MODE]
    }
}

4、最后

最后我们在页面里面使用，代码如下：

const api = {
    prod: 'http://ydhtml.com',
    test: 'http://test-ydhtml.com',
    rc: 'http://rc-ydhtml.com'
}

const baseURL = api[process.env.NUXT_ENV.MODE]

到此这篇关于nuxt.js 多环境变量配置的文章就介绍到这了,更多相关nuxt.js 多环境变量配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • nuxt.js写项目时增加错误提示页面操作

    为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验. 实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户: nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法 此项目中的错误提示页面是放在layouts目录中: layouts中的error.vue页面内容为: <template>

  • nuxt.js服务端渲染中axios和proxy代理的配置操作

    需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊 第

  • Nuxt.js的路由跳转操作(页面跳转nuxt-link)

    路由跳转代码如下: <ul> <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li> <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li> <li><nuxt-link :to="

  • 创建nuxt.js项目流程图解

    安装 步骤一:创建nuxt.js项目 步骤二:确定项目名.描述.作者,直接回车 步骤三:确定包管理工具 步骤四:选择UI框架 步骤五:选择前端服务器框架 步骤六:选择模块 步骤七:选择格式化工具 步骤八:选择测试框架 步骤九:选择渲染模式 ==SSR,服务器端渲染,需要nuxt.js需要知道,并需要练习的[推荐]== SPA,之前学的单页,本课程不练习. 步骤十:选择发布工具 步骤十一:安装成功 完整信息 安装成功截图 运行 以上就是创建nuxt.js项目流程图解的详细内容,更多关于创建nuxt

  • Docker部署Nuxt.js项目的实现

    Docker官方文档: https://docs.docker.com/ Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何接口. 使用 docker 部署 nuxt.js 项目 1.构建 node 镜像 FROM node:alpine 为啥使用 alpine 版本? 相比于其他 Docker 镜像,它的容量非常小,仅仅只有 5

  • Nuxt.js 静态资源和打包的操作

    直接引入图片 我们在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用. <div <img src="~static/logo.png"></div> 这时候在npm run dev 下是完全正常的,那我们看一下打包. 打包静态HTML并运行 用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,进行运行. 在终端中输入: npm run generate 然后在dist文件夹下输入live-serve

  • nuxt.js 在middleware(中间件)中实现路由鉴权操作

    路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问. 一般我是通过判断cookie中存储的token来判断的. 在middleware文件夹下新建"auth.js"的文件 在当前auth.js文件内判断cookie中是否包含token字段 import getCookie from '~/utils/getCookie' export default function ({route, req, res, redirect}) { let isClient = process.cl

  • Nuxt.js nuxt-link与router-link的区别说明

    前言 在使用Nuxt.js时可能会遇到一个这样的问题? 当打开请求页面的时候,所有页面都被请求了. 这正是<router-link>组件所有的特性. 首先说一下router-link router-link <router-link>是使vue项目具有路由功能的应用点击组件. nuxt-link 先看一下官方api介绍<nuxt-link> 正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的. 但,后面说将来我们会

  • nuxt.js添加环境变量,区分项目打包环境操作

    最近由于业务需求,开发了一个nuxt.js项目. 配置打包环境变量时,发现nuxt.js的文档过于简单,无法做参照. 经查证了一些资料后,解决了该问题.遂整理成文档,发布于此,给同行一些参照. 一.添加cross-env插件 npm npm i cross-env yarn yarn add cross-env 二.添加环境变量文件 根目录添加env.production NODE_ENV = 'production' VUE_APP_TITLE = 'production' 根目录添加env.

  • nuxt.js 多环境变量配置

    目录 1.前言 2.场景 3.创建环境 3.1 注入环境变量 4.最后 1.前言 一般在我们项目开发中,一般会有以下3个环境 开发环境也叫测试环境(test) RC环境也叫预发布环境(rc) 线上环境(production) 2.场景 那么有一种情况是我们需要在不同环境下区分不同的api接口例如 测试环境(test) api=test.ydhtml.com 预发布环境(rc) api=rc.ydhtml.com 线上环境(production) api=ydhtml.com 3.创建环境 接下来

  • Nest.js环境变量配置与序列化详解

    环境变量配置简述 程序在不同的环境下需要不同的环境变量,例如生产环境.测试环境以及开发环境所需要不同的数据库信息:链接地址.链接端口号.登录用户名和密码相关信息.为了解决这个问题需要进行相关操作. 在 Nest 中最佳方案创建一个 ConfigModule,该 ConfigModule 公开一个 ConfigService ,在 ConfigService 加载特有环境的 .env 文件. Nest 提供了 @nestjs/config 开箱即用的依赖包. 配置 npm 生态有很多相关的依赖包,

  • Node.js安装、环境变量配置、报错解决方法

    Node.js安装、环境变量配置、报错解决方法

    目录 1.下载Node.js 2.安装Node.js 3.验证Node.js 4.Node.js环境配置 5. Node.js测试 6. 补充 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台. Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好. 1.下载Node.js 下载地

  • 安装Python和pygame及相应的环境变量配置(图文教程)

    安装Python和pygame及相应的环境变量配置(图文教程)

    Hello,Everyone! Python是个好东西!好吧,以黎某人这寒碜的赞美之词,实在上不了台面,望见谅.那我们直接来上干货吧. 第一步:下载Python安装包https://www.python.org/ 1.进入Python官网,点击download 2.进入之后有两个安装包供选择(Python会根据你系统的位数智能选择,所以这里不用纠结你的电脑是32位的还是64位) 我的建议是下载Python3.0后面的版本,因为Python3在Python2的基础上,优化改进了一些代码格式.点击下

  • java三个环境变量配置简单教程

    在java 中需要设置三个环境变量(1.5之后不用再设置classpath了,但个人强烈建议继续设置以保证向下兼用问题) JDK安装完成之后我们来设置环境变量:右击"我的电脑",选择"属性",选择"高级"标签,进入环境变量设置,分别设置如下三个环境变量: (1)配置path变量: 为什么要配置path变量? 因为电脑系统将根据该变量的值找到java编程中需要的一些程序,比如javac.exe.java.exe.javah.exe等等,其中java

  • jdk环境变量配置

    jdk环境变量配置 进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置: 1.下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是:jdk-6u14-windows-i586.exe 2.安装jdk-6u14-windows-i586.exe 3.配置环境变量:右击"我的电脑"-->"高级"-->"环境变量" 1)在系统变量里新建JAVA_HOM

  • thinkPHP5.0框架环境变量配置方法

    本文实例讲述了thinkPHP5.0框架环境变量配置方法.分享给大家供大家参考,具体如下: 允许使用环境变量配置,并且优先级别比在配置文件中要高,因为在读取配置参数的时候,首先会判断环境变量中是否存在该配置. 在开发过程中,可以在应用根目录下面的.env来模拟环境变量配置,.env文件中的配置参数定义格式采用ini方式,例如: app_debug = true app_trace = true 如果你的部署环境单独配置了环境变量,那么请删除.env配置文件,避免冲突. 环境变量配置的参数会全部转

  • Linux中环境变量配置的步骤详解

    Linux中环境变量配置的步骤详解

    简介 我们大家在平时使用Linux的时候,经常需要配置一些环境变量,这时候一般都是网上随便搜搜就有人介绍经验的.不过问题在于他们的方法各不相同,有人说配置在/etc/profile里,有人说配置在/etc/environment,有人说配置在~/.bash_profile里,有人说配置在~/.bashrc里,有人说配置在~/.bash_login里,还有人说配置在~/.profile里...这真是公说公有理...那么问题来了,Linux到底是怎么读取配置文件的呢,依据又是什么呢?下面这篇文章就来

  • Java环境变量配置教程

    本文实例为大家分享了java的环境变量设置方法,供大家参考,具体内容如下  安装好jdk后找到我的电脑(右键) --> 属性-->高级选项卡-->环境变量,里面有管理员的用户变量,有系统变量.选哪一个都无所谓,我选的是Administrator的用户变量即管理员的用户变量,点击"新建",下面是需要填入的三个环境变量,形式都是环境名=环境值,依次填入即可: JAVA_HOME=c:\j2sdk1.5.0 (jdk安装文件夹位置) classpath=.;%JAVA_HO

随机推荐