Vue中配置本地、线上环境自动切换

1、安装cross-env包实现跨平台环境变量配置

命令： npm install cross-env -D

2、在package.json中添加cross-env运行环境脚本

  "scripts": { 
    "serve": "cross-env BUILD_ENV=dev vue-cli-service serve", // 这是开发环境
    "build": "cross-env BUILD_ENV=prod vue-cli-service build", //  这是线上环境
    "可能还会有其它环境...": "cross-env BUILD_ENV=prod vue-cli-service ...", // 。。。。
    "lint": "vue-cli-service lint"
  }
  

3、在跟目录下创建vue.config.js文件进行配置：

module.exports = {
  // 开启代码的严格校验模式
  lintOnSave: true,
  devServer: {
    // 可设置自定义端口号
    // prot:9999
  },
  // 指定资源路径
  //publicPath: 'http://www.baidu.com/app',
  chainWebpack: config => {
    console.log(config.plugin('define'))
    config.plugin('define').tap(args => {
      console.log('args::::', args)
      // 添加环境
      args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV)
      return args
    })
  }
}

4、在src目录下创建build文件夹：然后创建 dev.js文件 和 prod.js文件

注意：这里创建的js文件名要和package.json中的名字一致

这个是dev本地环境文件的配置：

module.exports = {
  BASE_URL: 'https://test.xxxx.com'
}

这个是prod线上环境的配置

module.exports = {
  BASE_URL: 'https://www.xxxx.com'
}

5、在封装好的axios中进行配置，通过命令来自动切换线上和线下环境

import axios from 'axios'

console.log('process.env.BUILD_ENV当前环境::', process.env.BUILD_ENV) // dev
console.log('process.env.BUILD_ENV::', process.env.NODE_ENV) // development
console.log('process.env.BUILD_ENV::', process.env.BASE_URL) // /

// 根据npm run serve或build 来自动读取不同环境变量
const config_env = require(`../build/${process.env.BUILD_ENV}.js`)

const service = axios.create({
  // baseURL: 'https://www.xxxxx.com',
  baseURL: config_env.BASE_URL,
  timeout: 3000
})
// 请求拦截
service.interceptors.request.use(config => {
  console.log(config)
  return config
}, _error => {
  return Promise.reject('请求出错')
})

// 响应拦截
service.interceptors.response.use(res => {
  return res
}, _error => {
  return Promise.reject('数据返回失败', _error)
})

export default service

6、然后直接通过命令 npm run serve运行的是本地环境

npm run build打包到dist中，
cd dist进入，
可以通过 hs -p 8888 -o 来生成一个服务器测试