Vue中配置多环境变量

在Vue开发中,经常遇见多个访问环境,开发环境、UAT环境、准生产环境、生产环境等,每一种环境下访问的域名,都是不一样的,所以,就可以通过配置多环境变量。

第一步:在package.json文件中,添加新的编译打包节点,

Vue中配置多环境变量_第1张图片

  "name": "survey_pro",
  "version": "1.0.0",
  "description": "dioacha",
  "author": "dorayo ",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "survey": "node build/survey.js" //新增的编译打包节点
  },

第二步:修改配置build的打包文件,可以把build.js文件,复制一份,重命名,比如:survey.js,同时修改,survey.js的配置参数

Vue中配置多环境变量_第2张图片第三步:修改打包配置文件

可以把webpack.prod.conf.js,复制一份,重命名为webpack.survey.conf.js,同时修改配置参数。

Vue中配置多环境变量_第3张图片

第四步:修改 webpack.base.conf.js配置参数

Vue中配置多环境变量_第4张图片

修改vue-loader.conf.js中的参数。

Vue中配置多环境变量_第5张图片

第五步:修改环境变量参数:

复制一份prod.env.js,重命名为survey.env.js,修改参数配置

学习博客:

https://www.cnblogs.com/itmrzhang/p/11008280.html

https://www.jianshu.com/p/09daa4f88dd5

 

你可能感兴趣的:(Vue,Vue,多环境变量配置)