zoukankan      html  css  js  c++  java
  • vue打包传递参数配置域名

    项目开发中,前端在配置后端api域名时很困扰,常常出现:

    本地开发环境: api-dev.demo.com

    测试环境: api-test.demo.com

    线上生产环境: api.demo.com,

    这次是在Vue.js项目中打包,教大家个方法:

    使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置。

    1.项目中/config/dev.env.js修改:

    新增:HOST: '"dev"'

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    module.exports = merge(prodEnv, {
     NODE_ENV: '"development"',
     HOST: '"dev"'
    })

    2.项目中/config/prod.env.js修改:

    获取传递进来的参数:

    'use strict'
    let HOST = process.argv.splice(2)[0] || 'prod';
    console.log(HOST);
    module.exports = {
     NODE_ENV: '"production"',
     HOST: '"'+HOST+'"'
    }

    3.项目中ajax封装的地方修改:

    /**
    ** 设置API接口域名
    **/
    let apiUrl = '';
    // 根据 process.env.HOST 的值判断当前是什么环境
    // 命令:npm run build -- test ,process.env.HOST就设置为:'test'
    let HOST = process.env.HOST;
    HOST = HOST === 'prod' '' '-' + HOST;
    apiUrl = 'http://api'+HOST+'.demo.com';
    axios.defaults.baseURL = apiUrl;

    4.最后敲命令:

    npm run build -- test

    注意–是2个横杠, 后面跟参数,这样  process.env.HOST 就获取到参数  'test'  了,

    若线上prod发布打包,npm run build -- prod

  • 相关阅读:
    名词解释
    cwoa2011项目部署到tomcat服务器(环境搭建及项目的运行)
    上网过程与原理
    C-编译器的实现
    css
    HMTL
    FIRST DAY
    关于面试的吐槽
    我的老大去创业啦
    .Net Core下使用 RSA
  • 原文地址:https://www.cnblogs.com/lcosima/p/9640291.html
Copyright © 2011-2022 走看看