Nuxt项目中多环境下baseUrl的配置

实际项目中有本地,测试,灰度,生产等环境,总不能老是去改配置注释吧,多累啊

于是就有了@nuxtjs/dotenv,可以帮助我们方便的管理我们的环境变量

安装  npm i @nuxtjs/dotenv -s

新建一个文件名为 .env的文件,也可以叫其他名字(.env是默认读取的文件名,可查看官方文档获取更多姿势)

需要去nuxt.config.js中配置modules模块

nuxt.config.js
...
module.exports = {
    modules: [
    [‘@nuxtjs/dotenv‘] //这里没有做其他参数传入,会默认读取目录下的.env文件,如果是叫prod.env,应该写成[‘@nuxtjs/dotenv‘, { filename: ‘.env.prod‘ }]
  ],
}
...

具体的使用如下

.env文件
DEV_BASE_URL = ‘http://xxx.cn‘
TEST_BASE_URL = ‘https://xxx.cn‘
TEST2_BASE_URL = ‘https://xxx.cn‘
PROD_BASE_URL = ‘https://xxx.cn‘

在nuxt.config.js文件中

require(‘dotenv‘).config()

let baseUrl = ‘‘

switch (process.env.BASE) {

case ‘dev‘:

baseUrl = process.env.DEV_BASE_URL

break;

case ‘test‘:

baseUrl = process.env.TEST_BASE_URL

break;

case ‘www2‘:

baseUrl = process.env.TEST2_BASE_URL

break;

case ‘production‘:

baseUrl = process.env.PROD_BASE_URL

break;

default:

baseUrl = process.env.PROD_BASE_URL

break;

}

module.exports = {

...

env: {

baseUrl: baseUrl,

}

}

这里的process.env.BASE是怎么来的呢,是在运行命令传进来的,pagage.json里面进行配置即可

为什么不用NODE_ENV呢,因为nuxt这个参数会用在全局配置,不能随便改,所以我们写多一个参数

 "scripts": {
    "dev": "cross-env NODE_ENV=development BASE=dev nodemon server/index.js --watch server","build": "cross-env NODE_ENV=production BASE=production nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js","generate": "nuxt generate"
  }

现在process.env.baseUrl 可以在全局进行访问,拼接api即可

原文地址:https://www.cnblogs.com/PeggyChan/p/11996788.html

时间: 2024-11-12 10:47:53

Nuxt项目中多环境下baseUrl的配置的相关文章

C# 获取文件路径,读取项目中某程序集下文件

获取文件路径 ------------------------------------------------------------------------- winform获取文件路径: string str1 =Process.GetCurrentProcess().MainModule.FileName;//获得当前执行的exe的文件名.string str2=Environment.CurrentDirectory;//获取和设置当前目录的完全限定路径.string str3=Dire

全世界最详细的图形化VMware中linux环境下oracle安装(二)【weber出品必属精品】

<ORACLE 10.2.05版本的升级补丁安装> 首先我们解压 $ unzip p8202632_10205_LINUX.zip 解压后我们会发现多出了个文件夹,他是:Disk1,进入Disk1.然后执行安装: $ ./runInstaller 执行脚本 # /u01/app/oracle/10.2.0/db_1/root.sh Running Oracle 10g root.sh script... The following environment variables are set a

全世界最详细的图形化VMware中linux环境下oracle安装(一)【weber出品必属精品】

安装流程:前期准备工作--->安装ORACLE软件--->安装升级补丁--->安装odbc创建数据库--->安装监听器--->安装EM <前期准备工作> 安装配置系统环境安装linux ,所有服务都不选择,只是选择安装开发工具,不要安装防火墙(当然也可以在后面关闭) 打开终端,执行如下命令,检查安装包,没有的都要安装 make, glibc, libaio compat-libstdc++, compat-gcc-34, compat-gcc-34-c++, gc

Android项目中gen文件下R文件无法生成的解决的方法

帮一个网友解决R文件无法生成的问题,搜集了些材料特整理例如以下,刚開始学习的人參考他人代码时极易出现此种问题,一般都是xml文件出错,无法被正确解析. gen文件夹无法更新,或者gen文件夹下的R.JAVA文件无法生成 1.gen文件夹的用处 android gen文件夹下的R.java并非由用户创建,而是androidproject本身将android的资源进行自己主动"编号"(ID)值. 2.gen文件夹下R文件无法更新/生成的原因 1)res文件夹下的layout下的xml文件名

Android项目中gen文件下R文件无法生成的解决办法

帮一个网友解决R文件无法生成的问题,搜集了些材料特整理如下,初学者参考他人代码时极易出现此种问题,一般都是xml文件出错,无法被正确解析. gen目录无法更新,或者gen目录下的R.JAVA文件无法生成 1.gen目录的用处 android gen目录下的R.java并不是由用户创建,而是android工程本身将android的资源进行自动"编号"(ID)值. 2.gen目录下R文件无法更新/生成的原因 1)res目录下的layout下的xml文件名有错.按照android的命名规范是

windows环境下mysql主从配置

原文:windows环境下mysql主从配置 mysql主从配置. 相关理论知识可以百度一下,这里就不多说了,直接说如何配置. 一.环境介绍及说明 主库所在的操作系统:win7 主库的版本:mysql-5.6.24-winx64.zip 主库的ip地址:127.0.0.1 主库的端口:3306 从库所在的操作系统:win7 从库的版本:mysql-5.6.38-winx64.zip 从库的ip地址:127.0.0.1 从库的端口:3307 下载地址:https://www.mysql.com/d

win环境下,django+postgresql配置

先下载postgresql的python包,选择合适自己的python版本和平台32位还是64位,http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 下载win环境下postgresql接口,http://www.stickpeople.com/projects/python/win-psycopg/ 设置django settings.py DATABASES项 注:第2步如果不操作就会出现from psycopg2._psycopg import

OSPF环境下帧中继的配置

配置 R1========================================================================================= frame-relay de-list 1 protocol ip list 100 ! interface Loopback0 ip address 1.1.1.1 255.255.255.0 ! interface Serial1/0 ip address 10.1.1.1 255.255.255.0 e

Ubuntu环境下的Redis 配置与C++使用入门

  Redis是一个高性能的key-value数据库. Redisedis的出现,很大程度补偿了memcached这类key/value存储的不足,在部分场合可以对关系数据库起到很好的补充作用.它提供了Java,C/C++,C#,PHP,JavaScript,Perl,Object-C,Python,Ruby,Erlang等客户端,使用很方便. 本文将通过介绍Ubuntu环境下的Redis 配置,介绍C++入门使用的方式,帮助读者快速上手Redis. 安装配置 获取源码.解压.进入源码目录,编译