Vue分环境部署

前言

本文来自菜鸡的个人理解，如有不对的地方请评论区留言指正，多谢🙏

DEV （Development Environment）开发环境，用于软件开发人员开发联调时使用。
FAT （Feature Acceptance Test Environment）功能验收测试环境，也就是俗称的测试环境。
UAT （User Acceptance Test Environment）用户验收测试环境，类似于预发布环境。
PRO （Production Environment）生产环境。

---

vue-cli 在本地跑和打包时候默认只有 development / production 两种模式，分别对应 process.env.NODE_ENV 的 development / production 两个值
我们知道 vue-cli 的 vue.config.js 是对 webpack 的 webpack.config.js 的一层拦截，最终会合并出一个 config
日常开发中常常线上模式分 开发环境/测试环境/预发布环境/生产环境 等多种环境，此时我们需要做一些额外工作

---

分解 vue-cli 3.0 的 webpack 配置

导出合并后的 webpack 配置，导出的 webpack config 受 vue.config.js 配置的影响

npx vue-cli-service inspect --mode development >> webpack.config.development.js
npx vue-cli-service inspect --mode production >> webpack.config.production.js
npx vue-cli-service inspect --mode FUCK >> webpack.config.FUCK.js

通过 axios 解决不同环境接口不同

在封装 axios 时设置 baseURL
这里我是通过 axios 的 create 方法创建一个实例。如果需要封装 axios 相关内容，可以查看我的 另一篇博客

import axios from 'axios';

const instance = axios.create({})

if (process.env.NODE_ENV == 'development') {
  instance.defaults.baseURL = '/c';
} else if (process.env.NODE_ENV == 'debug') {
  instance.defaults.baseURL = '/debug';
} else if (process.env.NODE_ENV == 'production') {
  instance.defaults.baseURL = '/pro';
}

或者直接设置 axios

axios.defaults.baseURL = '/xx'

然后在 vue.config.js 的 proxy 中配置对应的反向代理就好了

module.exports = {
  devServer: {
    proxy: {
      '/dev': {
        target: 'http://www.dev.com',
        changeOrigin: true,
        pathRewrite: (path) => path.replace('/dev', ''),
      },
      '/debug': {
        target: 'http://www.debug.com',
        changeOrigin: true,
        pathRewrite: (path) => path.replace('/debug', ''),
      },
      '/pro': {
        target: 'http://www.pro.com',
        changeOrigin: true,
        pathRewrite: (path) => path.replace('/pro', ''),
      },
    },
  },
};

---

通过环境变量解决不同环境接口不同

1. 根目录新增 .env.FUCK 。文件后缀 .FUCK 和 NODE_ENV=FUCK 一致

NODE_ENV=FUCK
...
VUE_APP_BASEAPI=https://FUCK环境后端接口地址

2. 配置 package.json 中的 npm scripts

"scripts": {
  ... 其他环境的 npm 脚本
  "serve-FUCK": "vue-cli-service serve --mode FUCK",
  "build-FUCK": "vue-cli-service build --mode FUCK"
},

3. 配置 vue.config.js

module.exports = {
  configureWebpack: (config) => {
    // 区分 npm 脚本是本地起服务，还是进行打包。根据 process.argv 数组内的关键字进行判断
    /* process.argv ->
      [
	    '/usr/local/bin/node',
	   '/Users/xxxxxx/Desktop/code/vue-mode/node_modules/.bin/vue-cli-service',
	    'serve', // 或 build
	    '--mode',
	    'FUCK'
	  ]
	  
	  其中 serve --mode FUCK 对应 npm script 参数，即 npm run 对应的 package.json 内的 script
	*/
	
    config.mode = process.argv.some((item) => item.includes('build')) ? 'production' : 'development';
  },
  
  // 这样在反向代理的配置就不需要每次手动更改了
  devServer: {
    proxy: {
      '/baseApi': {
        target: process.env.VUE_APP_BASEAPI,
        changeOrigin: true,
        pathRewrite: (path) => path.replace('/baseApi', ''),
      },
    }
  }
};

webpack 默认是开发模式，不压缩混淆代码，不去 js 内注释，只把做打包资源整合。
如果设置 NODE_ENV=FUCK，webpack 不会设置 mode 为 FUCK 或 produciton，为默认值 development。mode 可选值有三个，分别对应不同的打包优化的配置，可以在 webpack 看模式相关内容
官方说明点这里 ： 记住，只设置 NODE_ENV，则不会自动设置 mode

---

VUE-CLI 的环境变量官方链接：https://cli.vuejs.org/zh/guide/mode-and-env.html

1. 我们来看一看开头写了什么东西

你可以替换你的项目根目录中的下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

2. 意思是根目录要创建一个 .env.[mode] 的环境文件来指定你的环境信息，我们来看一下文件的内容：

FOO=bar
VUE_APP_SECRET=secret

3. 好的我们懂了这里书写格式是键值对，然后呢？

被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用

4. 好的我们知道了上边的两个环境变量对哪里有用了，但是怎么用呢？如何分环境部署？

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

5. 好的我们知道了vue-cli有三种模式，但是着都不是我想要的，我想要 开发环境 测试环境 预发布环境 生产环境 怎么搞？

注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 “development”。

6. 这里说 NODE_ENV 的值将是模式的名称，那么我的 PRE 环境 下的 .env.PRE 文件应该这样

NODE_ENV=PRE

但这有什么用呢？

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。

7. 我现在知道了，.env.[mode] 文件里的环境变量只有再对应 [mode] 模式下被载入，其他的模式文件下的环境变量都不会被载入，但如何应用这个模式呢？我怎么让我指定的模式被载入？

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：

"dev-build": "vue-cli-service build --mode development",

8. 奥！我知道了，需要再 package.json 中设置 npm 脚本让他生效

package.json

"自定义 npm 脚本名": "vue-cli-service build --mode 自定义模式"

你的命令看起来像这样
"serve-PRE": "vue-cli-service serve --mode PRE",
"build-PRE": "vue-cli-service build --mode PRE"

9. 测试一下，created 钩子输出 process.env.NODE_ENV 看看，果然是我们指定的模式，成功~~

---

public/index.html

<%= VAR %> 用于非转换插值  例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
<%- VAR %> 用于HTML转义插值
<% expression %> 用于JavaScript控制流

---

run serve 分环境

1. 想在 npm run serve 的时候可以自动对应后端 开发/生产/预发布/测试 等环境的 api 地址，也就是在日常开发的时候换后端地址，而不是始终用一套后端的地址，或每次手动去 vue-cli 的反向代理配置那里手动修改

项目根目录新建 .env.serve-pre

NODE_ENV=development
VUE_APP_BASEAPI=http://日常开发使用后端预发布的地址.com

package.json

"scripts": {
  "serve-pre": "vue-cli-service serve --mode serve-pre",
}

此时应该可以实现了，如果想测试效果的话可以自己再添加一个系统变量测试，如

NODE_ENV=development
VUE_APP_BASEAPI=http://日常开发使用后端预发布的地址.com
VUE_APP_MSG=预发布环境

---

run build 分环境

1. 打包根据 开发/测试/预发布/生产 不同环境使用不同的后端 api 地址
2. 打包输出文件夹根据不同环境输出不同的文件名

---

项目根目录新建 .env.build-pre 文件准备 预发布环境的打包

NODE_ENV=production      				表明需要打包
VUE_APP_TITLE=build-pre
VUE_APP_BASEAPI=http://生产环境api.com

package.json

"scripts": {
    "build-pre": "vue-cli-service build --mode build-pre",
}

以上两部就成功分环境了，具体是根据 VUE_APP_TITLE 实现的

vue.config.js

let outputDir;
if (process.env.NODE_ENV === 'production') {
  switch (process.env.VUE_APP_TITLE) {
    case 'build-pre':
      outputDir = 'pre-release';
      break;
    case 'build-dev':
      outputDir = 'beatiful-country';
      break;
    default:
      outputDir = 'dist';
  }
}
module.exports = {
  outputDir,
}

---

还没成功的话看一下我的参考
https://www.cnblogs.com/wangtianci/p/11389523.html