Vue 简单配置公用接口地址

Vue 简单配置公用接口地址

有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 npm run build 判断

1. 首先配置

先新建一个 config.js 的文件
开发环境: 说明在本地测试的时候链接的地址
测试环境: 说明是根据 npm run test 进行判断
生产环境: 说明是已经部署到线上的代码 npm run build

let baseURL = ''

if (process.env.NODE_ENV === 'production') {
    //根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
    if (process.env.VUE_APP_TITLE === 'production') {
        //production 生产环境
        baseURL = 'http://192.168.10.111:8080/zhikong'
    } else {
        //test 测试环境
        baseURL = ''
    }
} else {
    //development 开发环境
    baseURL = 'http://192.168.10.12:8080/zhikong'
}

export default baseURL

2. package.json 文件下的配置

根据不同的指示来说明具体去调用哪个接口地址

{
  "scripts": {
    "serve": "vue-cli-service serve",
    // 根据不同的指示来说明具体去调用那个接口地址
    "build": "vue-cli-service build --mode build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }
}

3. .env.build 和 .env.test 文件

在和 src 文件夹同级的根目录下新建 .env.build 和 .env.test 文件

3.1 .env.build

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

3.2 .env.test

NODE_ENV = 'production'
VUE_APP_TITLE = 'test'

4. vue.config.js 文件配置

npm run build 根据环境生成不同打包的文件夹

const path = require('path')
function resolve (dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    publicPath: './',
    // `npm run build` 根据环境生成不同打包的文件夹
    outputDir: process.env.VUE_APP_TITLE === 'production' ? 'dist-zhikong' : 'test',
    assetsDir: "",
    indexPath: 'index.html',
    filenameHashing: true,
    lintOnSave: false,
    runtimeCompiler: false,
    transpileDependencies: [],
    productionSourceMap: false,
    integrity: false,
    configureWebpack:{ 
        resolve:{   
            alias:{
                '@': resolve('src'),
            } 
        }
    },
    devServer:{   
        port:8080,
        host:'0.0.0.0',
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        }
    }
}