vue配置各种环境-环境切换问题-打包自由切换

vue-cli版本是2.0左右的就会有webpack的config目录
vue-cli版本是3.0以上的就会有vue.config.js没有config目录

• 我们先来看第一种怎么配置（有webpack的config目录）
  目录：
  配置：这里一共展示dev环境和生产环境，其他环境在config目录类似添加

需要下载cross-env

npm install --save-dev cross-env

警告！确保在安装软件包时可以正确拼写，以免错误安装恶意软件

注意：cross-env的版本6仅支持Node.js 8和更高版本，才能在Node.js 7或更低版本的安装版本5上使用npm
install --save-dev cross-env@5

使用（举例）

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

第一步： config目录=》index.js

  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {   
      [process.env.API_ROOT]: {   
       // target: `http://xxx:8888`,  // 当设置process.env.API_ROOT之后。target就没用了他会自动识别你登录的是dev还是prod环境，从而自己切换域名
        changeOrigin: true,
        pathRewrite: {
          ['^'   process.env.API_ROOT]: ''
        }
      }
    },

第二步：config目录=》dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  API_ROOT:'http://xxx.con'//这里是dev环境的域名配置
})

第三步：config目录=》dev.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  API_ROOT:'http://xxx.com'  // 生产环境

}

第四步build目录=》webpack.prod.conf.js

//const env = require('../config/prod.env')  注释这一行改为下面一行
const env = require('../config/'   process.env.env_config   '.env')

第五步在你封装axios时，需要进行配置

// 获取当前你使用到的所有环境，通过对env判断拿到对应的API_ROOT
const proEnv = require("../../config/prod.env");
const devEnv = require("../../config/dev.env");
const env = process.env.NODE_ENV;
let target = "";
if (env === "production") {
  target = proEnv.API_ROOT;
} else {
  target = devEnv.API_ROOT;
}
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: target,
  // baseURL: 'http://xxx.com',
  // 超时
  timeout: 60000
})

第六步：打包？？ package.json

在dev下面添加：

 "build:dev": "cross-env NODE_ENV=development env_config=dev node build/build.js",
 "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", 

注意NODE_ENV以及env_config配置的时候一定要对应清楚，名字不能马虎

打包自由切换

打包生产：npm run build:prod
打包dev: npm run build:dev

-第二种情况 （ 有vue.config.js）这里vue.config如果没有也是可以自己创建的

第一步，创建需要的环境文件，这里有五种环境

内容：（每个文件内容是相同的只是env与VUE_APP_BASE_API设置的不一样）

# 页面标题
VUE_APP_TITLE = xxx

# 生产环境配置
ENV = 'production'

# 案件管理系统/生产环境
VUE_APP_BASE_API = 'http://xxx.com'

这里其他就不介绍了与上面是雷同的
第二步vue.config.js

 devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        //target: `http://xxx:8080`, // 同样是没有影响的
        changeOrigin: true,
        pathRewrite: {
          ['^'   process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
  },

第三步

const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,  // 直接获取环境地址自由切换
  // 超时
  timeout: 60000
})

第四步

"scripts": {
    "dev": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prev": "vue-cli-service build --mode prev",
    "build:prod": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },

打包自由切换:其他类似

打包生产：npm run build:prod
打包dev: npm run build:dev
打包test: npm run build:test

这篇好文章是转载于：学新通技术网