vue-cli3通过不同的打包命令生成测试或者正式的请求地址

工作中通常开发环境和正式环境使用的请求地址是不同的 ，大多数的做法是手动更改请求地址，但是手动的去更改导致错误的几率会更大，所以vue-cli3提供了 ‘环境变量与模式’ （https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F），通过这个方法我们可以通过命令的方式更改请求的地址，从而减少了手动更改导致错误的几率。

注：创建的文件名称中   env 前后各有一个英文的句号（.），这里为了便于测试 将请求地址console了出来 便于观察  通过 

      process.env.VUE_APP_BASE_API  可以取得相关变量内容

1. 本地开发请求地址配置方式 

     在项目根目录（与package.json文件平级目录）创建   .env.development 文件

     内容  VUE_APP_BASE_API = '测试环境打包请求地址' 

     此时运行（npm run serve）并且输出 process.env.VUE_APP_BASE_API 内容便是  '测试环境打包请求地址' 

     注：因为外部文件的更改不会触发vue-cli的热更新 所以这里每一次对文件的更改都需要重新运行一次

2.配置本地测试打包请求地址 方式与第一步一样 只是创建了一个不同名称的文件而已 

    创建文件： .env.test  

     内容： VUE_APP_BASE_API = '测试环境打包请求地址'  

     配置package.json文件  添加命令 "test": "vue-cli-service build --mode test",

      注："test": "vue-cli-service build --mode test" 这条命令 最后的 ‘ test ’ 名称不是固定的 只要与创建的文件名称 ‘ .env. ’

      后面的名称对应即可

     运行打包命令查看效果 （因为是测试环境打包 所以运行的打包命令为   npm run test） 

    好的 完美报错 哈哈哈

    这里注意 vue-cli打包出来的 index.html文件不能直接打开 需配置  vue.config.js 文件 因为vue-cli3 文件结构精简的原因 此文件需自行创建 

    内容 ：

module.exports = {

  publicPath: process.env.NODE_ENV === 'production' ? './' : '',

  productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,

  outputDir: process.env.outputDir,

};
查看效果  

完美运行 

现在就剩下最后正式环境打包的配置了 

3. 创建  .env.production 文件  内容：VUE_APP_BASE_API = '线上正式环境打包请求地址'

直接运行 npm run build 命令打包即可 

第一步和第三步不需要配置package.json文件 因为这两个命令cli3已经内置了 不需要配置

 

      不足之处希望各位大神多多指教