美文网首页工作生活
vue生产环境开发环境配置不同的接口地址

vue生产环境开发环境配置不同的接口地址

作者: 丰起云啸 | 来源:发表于2019-08-13 15:46 被阅读0次

    第一种

    1. /config/dev.env.js
      

    module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API_ROOT: '"172.1.1.1/api"' //新增接口路径
    })
    /config/prod.env.js

    var merge = require('webpack-merge')
    var prodEnv = require('./prod.env')

    module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API_ROOT: '"//127.0.0.1/api"' //新增接口路径
    })
    2.然后我们可以在main.js文件设置vue原型

    Vue.prototype.baseURL = process.env.API_ROOT;

    第二种
    一般项目webpack会有两个或多个配置文件,如:
    webpack.prod.conf.js对应线上打包
    webpack.dev.conf.js对应开发环境
    使用webpack.DefinePlugin就可以

    开发环境(webpack.dev.conf.js):
    //开发环境下的baseURL
    new webpack.DefinePlugin({
    BASE_URL:"'xxxxxxxxx'"
    })

    线上环境(webpack.prod.conf.js): //线上环境下的baseURL
    new webpack.DefinePlugin({
    BASE_URL:" 'xxxxxxxxx' " })

    BASE_URL一定要默认一个"" 要不然不是字符串
    这样在vue里 BASE_URL就是全局变量了.直接用BASE_URL就能获取到

    相关文章

      网友评论

        本文标题:vue生产环境开发环境配置不同的接口地址

        本文链接:https://www.haomeiwen.com/subject/poiqhctx.html