vue+webpack简单分环境打包设置请求地址

在实际开放中会涉及到测试环境、生产环境的打包问题,使用webpack init 生成的vue项目需要每次去手动修改请求地址,着实很影响效率(实际就是懒),所以根据这个需求进行了不同环境打包时请求地址的分配,具体操作如下:

涉及文件:

1.build > webpack.prod.config.js, util.js;
2.config > index.js, test.env.js(added);
3.package.json;
4.axios文件(baseurl);

具体步骤:

1.config下新建test.env.js文件,格式与prod.env.js一样
 ‘use strict’
  module.exports = {
    NODE_ENV:'"testing"',
    ENV_CONFIG: '"test"'
  }

2.build > webpack.config.js,根据运行的环境来引入相关文件
  // const env = require('../config/prod.env')
  var env;
  if(process.env.NODE_ENV === 'testing') {
    env = require('../config/test.env')
  }else{
      env = require('../config/prod.env')
  }

 3.build > util.js
    exports.assetsPath = function (_path) {
      const assetsSubDirectory = process.env.NODE_ENV === 'production' 
      ? config.build.assetsSubDirectory
      : config.dev.assetsSubDirectory 
    
      return path.posix.join(assetsSubDirectory, _path)}

4. package.json
    "script": {
      "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
      "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
    }


5. 请求文件中根据  process.env.NODE_ENV 进行配分就大功告成啦;

*如果出现测试环境打包出来的文件路径找不到的报错记得去更改config > index.js 下的dev中assetsPublicPath为'./'相对路径;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容