阅读 451
用 NuxtJS 构建 SSR 商城 实战笔记——设置环境变量及定义 baseURL

用 NuxtJS 构建 SSR 商城 实战笔记——设置环境变量及定义 baseURL

这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战

本篇主要介绍基于 NuxtJS 构建的 vue 后端渲染(SSR)项目中关于环境变量 process.env 的设置,而设置这玩意儿主要是为了方便配置不同环境下的 api 请求基础路径 baseURL 。有不足之处或是任何意见建议,欢迎各位大佬不吝斧正~

本项目分成了 dev、testing、staging 和正式上线 4 种不同的环境,方便开发测试。不同环境的 api 请求基础路径并不一样,每次都手动修改难免会有纰漏,并且显得不够有逼格。在一般 vue 项目中,解决这个问题,我们会为不同的环境建立不同的 .env 文件,比如 .env.development,然后在里面配置基础路径变量,如 VUE_APP_BASE_API = http://xxx.com/

但是,在 nuxt 项目里直接新建 .env 配置文件是无效的,过去的解决办法是安装使用 @nuxtjs/dotenv。而在 nuxt 版本 > 2.12+ 之后,官方推荐使用 publicRuntimeOptionsprivateRuntimeOptions 来进行配置。接下来,开始正式介绍配置过程,最开始需要使用到 cross-env:

借助 cross-env 设置环境变量

环境变量也就是 Node.js 中的 process.env,拆解来看,process 是个对象,可以提供有关当前 Node.js 进程的信息,是个全局变量,对于 Node.js 应用程序始终是可以直接拿来就用的。 process.env 属性返回的是一个包含用户环境信息的对象,也就是环境变量。在不同的平台,比如 Linux 和 Windows,环境变量的配置方式不一样,而 cross-env 是一个可以跨平台设置和使用环境变量的脚本,让我们能很方便的设置和使用环境变量。

1. 安装 cross-env

npm i cross-env -D
复制代码

2. 使用

在 package.json 的 scripts 中设置环境变量,格式就是先写个 cross-env,接着配置环境变量,可以写多个,最后写上原本的命令:

"scripts": {
  "dev": "cross-env BASE_URL=http://dev.xxx.com BROWSER_BASE_URL='' NODE_ENV=development nuxt",
  "build": "cross-env BASE_URL=http://xxx.com BROWSER_BASE_URL=http://xxx.com  NODE_ENV=production nuxt build"
}
复制代码

其实最终,执行命令时,比如运行 npm run build,执行的还是 nuxt build

至此,我们就设置好了环境变量,执行不同的命令时,根据不同的 NODE_ENV,就能在服务器端拿到不同的服务器请求基础路径 BASE_URL,和浏览器请求基础路径 BROWSER_BASE_URL 了(主要是为了在 nuxt.config.js 中使用)。

注意:

  • BROWSER_BASE_URL是 @nuxtjs/axios 中才有的配置属性;
  • BROWSER_BASE_URL 设置为空字符串是因为在开发环境下我们进行了跨域 proxy 配置。

3. 配置 nuxt.config.js

因为 nuxt 使用 webpack 的 definePlugin 来定义环境变量,所以 Node.js 里的 processprocess.env 是不能直接在浏览器环境下使用或定义的,需要定义在 env 属性中,通过单独映射到 process.env.xxxx 并在编译期间进行转换编译:

// nuxt.config.js 
env: { BASE_URL: process.env.BASE_URL }  
复制代码

在这里设置了才能在浏览器端通过 process.env 取值。

定义 baseURL

之前我是直接在 plugins\axios.js 中使用 service.defaults.baseURL 配置的基础请求路径,后来查阅 @nuxtjs/axios 文档发现可以直接在 nuxt.config.js 中配置,这里会用到开头提到的publicRuntimeOptions 和 privateRuntimeOptions 这两个新属性:

// nuxt.config.js
publicRuntimeConfig: { 
  axios: { 
    browserBaseURL: process.env.BROWSER_BASE_URL // 浏览器请求 
  } 
}, 

privateRuntimeConfig: { 
  axios: { 
    baseURL: process.env.BASE_URL // 服务器请求 
  } 
}
复制代码
  • publicRuntimeConfig: 是一个对象,可以从客户端和服务器通过 $config 访问此对象的值;
  • privateRuntimeConfig: 是一个对象,只能在服务器通过 $config 访问此对象的值。并且会覆盖设置在 publicRuntimeConfig 里的服务器端获得的值。

使用

现在,我们就可以在项目里通过 this.$config 或是 context.$config 拿到 axios.browserBaseURLaxios.baseURL。注意,因为后者是设置在 privateRuntimeConfig 里,所以只能在服务器端打印得到,在浏览器端结果将是 undefined

注意:$config 是 nuxt 2.13+ 版本后定义的。

总结

现在,运行不同的打包命令,BASE_URLBROWSER_BASE_URL 就会是我们在 package.json 设置的相应的值。在请求发出时,自动添加到请求路径当中:服务器请求会添加 BASE_URL;浏览器请求会添加 BROWSER_BASE_URL,我们在开发模式下设置的值为空,配合之前进行的跨域设置,会被 proxy 进行代理从而实现跨域。在项目中如果需要判断不同的运行环境,可通过 process.env.NODE_ENV 获得,想要获取 api 请求基础路径,则在浏览器环境可通过 this.$config.axios.browserBaseURL 获取,在服务器环境可通过 context 获取,如:

asyncData ({ $config: { axios: { baseURL } } }) { console.log(baseURL) }
复制代码

关于 @nuxtjs/axios 的安装使用以及跨域的设置,可参见《用 NuxtJS 构建 SSR 商城 实战笔记——axios 配置与跨域的实现》

感谢.gif
点赞.png

文章分类
前端