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.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打測試環境包。