vue项目在不同环境下请求不同接口地址

在vue-cli2的版本中，在项目的目录下有config文件夹，config文件夹里面有dev.env.js和prod.env.js文件，dev.env.js是开发环境的配置文件，prod.env.js是生产环境的配置文件

在dev.env.js文件中配置开发环境的接口

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'"/api/"'//这个是开发环境访问的接口，这里我使用了服务器代理(/api)，因为axios是跨越的
})

在prod.env.js中配置生产环境的接口

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"http://192.168.43.94:8080/"'//这个是项目打包后访问的接口
}

调用axiso请求接口的时候就可以使用   process.env.API_HOST(API_HOST是在dev.env.js和prod.env.js定义的一个变量名)访问接口，比如

let url =process.env.API_HOST + "xxxx/xxxxx";

这样就可以实现不同环境下请求不同接口地址

vue-cli3.0版本中

vue-cli3.0和vue-cli2.xx的版本出现了一些变化，在vue-cli3.0的根目录下面创建一个.env.development文件和.env.production文件

(图片的说明来自https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F)

.env.development(开发环境下的接口访问)文件内容：

NODE_ENV="development"
VUE_APP_TITLE='/api/' //开发环境的接口（这里使用了服务器代理）

.env.production（生产环境下的接口访问）

NODE_ENV="production"
VUE_APP_TITLE='http://192.168.43.94:8080/' //接口

调用axiso请求接口的时候就可以使用   process.env.VUE_APP_TITLEVUE_APP_TITLE是在dev.env.js和prod.env.js定义的一个变量名)访问接口，比如

let url =process.env.VUE_APP_TITLE + "xxxx/xxxxx";

这样就可以实现不同环境下请求不同接口地址

下面是配置服务器代理解决跨越的问题

在vue-cli3.0的版本中，要在项目文件的根目录下面创建一个vue.config.js去配置一些东西，比如服务器代理

vue.config.js

module.exports = {
    // 基本路径
    publicPath: '/',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置
    chainWebpack: () => { },
    configureWebpack: () => { 
        // if (process.env.NODE_ENV === 'production') {
        //     console.log(777)
        //     VUE_APP_TITLE:'http://192.168.43.94:8080/'
        //   } else if(process.env.NODE_ENV === 'development') {
        //       console.log(666)
        //       VUE_APP_TITLE:'/api/'
        //   }

    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    parallel: require('os').cpus().length > 1,
    pwa: {},
    // webpack-dev-server 相关配置
    //服务器代理的配置
    devServer: {
        open: true,                                 //配置自动启动浏览器
        host: 'localhost',
        port: 8083,                                 // 端口号
        https: false,
        hotOnly: false,                             // https:{type:Boolean}
        proxy: {                                        // 配置跨域
            '/api':{
                target:'http://192.168.43.94:8080', //源地址
                changeOrigin:true,                  //改变源
                ws:true,                            //是否代理websockets
                pathRewrite:{
                    '^/api':''
                }
            }
        },                                           // 配置跨域处理,只有一个代理
        before: app => { }
    },
    // 第三方插件配置
    pluginOptions: {}
}