欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-13 20:42:22
...

最近由于业务需求,开发了一个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.test文件

NODE_ENV = 'production'
VUE_APP_TITLE = 'test'

三、注入全局环境变量

nuxt.confit.js中添加环境变量配置

export default {
	env: {
	    VUE_APP_TITLE: process.env.VUE_APP_TITLE
	}
}

四、修改打包命令

package.json中修改以下命令

"scripts": {
   "dev": "nuxt",
   "build": "cross-env process.env.VUE_APP_TITLE=production nuxt build",
   "build:test": "cross-env process.env.VUE_APP_TITLE=test nuxt build",
   "start": "nuxt start",
   "generate": "nuxt generate",
   "test": "jest"
 }

运行 yarn build打生产环境包,yarn build:test打测试环境包。

相关标签: nuxt