nuxt.js分环境打包配置

背景：

• 需求需要在已成型项目中使用不同命令自动打包配置 , 测试环境和上线环境实现效果npm run build打包上线环境地址 npm run build:test打包测试环境地址
• 查询了网上的方法经过实践简化成简单粗暴的方式,尽可能少更改原项目
• 直接对nuxt.js打包修改无从下手,最后使用的npm i cross-env
  

---

修改前项目布局：

1、 使用npm generate打包

---

修改后项目布局：

1、 npm run build:test打包测试环境(引入多个地址与正式环境不同)
2、npm run build打包正式环境(引入多个地址与测试环境不同)

---

修改方法以及修改原因：

1、安装cross-env 习惯使用npm

  npm i cross-env

2、 nuxt.config.js中添加env配置

  env: {
    VUE_APP_TITLE: process.env.VUE_APP_TITLE
  }

关于process.env, vnode.js官网解释http://nodejs.cn/api/process.html#process_process_env
process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终是可用的，故无需使用 require()。
可以在全局取用,webpack 在构建的时候，可以为process.env 赋值：如第2步

3、修改打包命令同时给process.env存值,用以项目内部文件区分不同环境使用不同地址

"scripts": {
    "dev": "nuxt",
    "build": "cross-env process.env.VUE_APP_TITLE=production nuxt generate", //正式环境给process.env.VUE_APP_TITLE赋值production
    "build:test": "cross-env process.env.VUE_APP_TITLE=test nuxt generate",//测试环境给process.env.VUE_APP_TITLE赋值test
  },

4、 项目内取用process对象内容(来实现动态打包不同环境的地址)
踩过的坑: (此处可能console.log(process.env)是一个空数组,但是console.log(process.env.VUE_APP_TITLE)如果有值也是可以使用的)