vue的几种打包，测试环境。（活用.env.xxxx文件）

在使用vue-element-admin时，为了测试和控制版本，使用了几种不同得打包测试方法，在此记录一下

关于调试的指令，可以在package.json中查看。

这里提到的三种分别是

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging"
  }

1、npm run dev就是我们平时测试时使用最多的命令，可以使用nodejs在本地搭建服务。十分方便查看样式、效果等等。

默认访问地址就是localhost:9527，相关设置在vue.config.js中。同时还要在这里处理一些请求的跨域问题。

const port = process.env.port || process.env.npm_config_port || 9527

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // proxy 处理跨域
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://xxxxxxxxxx:xxxxx', 
        changeOrigin: true,
        pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' }
      }
    }

    // 取消mock配置
    // before: require('./mock/mock-server.js')
  },

2、npm run build:prod 打包生产环境，npm run build:stage 打包测试环境

这两个命令其实都是进行打包，从build分开来的。最直观的区别就是会调用不同的.env文件。

process.env变量的后缀就来自,env文件。调试时会查找响应的文件来引用变量。

比如在设置区分这两个打包的地址时，也是在vue.config.js来设置outputDir

vue.config.js中：
outputDir: process.env.VUE_APP_BUILD_PATH

.env.production中
VUE_APP_BUILD_PATH = 'dist'

.env.staging中
VUE_APP_BUILD_PATH = 'stage'

这样两种打包就会打包到不同的文件中啦。（别忘了git时修改.gitignore文件，加一行“stage/”来忽略这个打包后的文件）

process.env.变量可以自由的使用在任何地方，所以很方便的通过这个变量来控制环境。

但是切记，命名时的前缀必须又“VUE_APP_”。总之需要按照使用惯例来命名。