vue打包前开发测试生产环境接口地址配置


npm run dev     //开发环境

npm run test   //打包测试环境

npm run build   //打包生产环境

1、新建webpack.test.conf.js

    在build文件夹下面新建webpack.test.conf.js文件,复制webpack.prod.conf.js的内容到webpack.test.conf.js,然后修改下面内容

const env = require('../config/prod.env')

改为:

const env = require('../config/test.env')

2、 新建test.js

    在build文件夹下面新建test.js文件,复制build.js的内容到test.js,然后修改下面内容

const webpackConfig = require('./webpack.prod.conf')

改为:

const webpackConfig = require('./webpack.test.conf')

3、新建test.env.js

    在config文件夹下面新建test.env.js文件,复制test.env.js的内容到test.env.js

4、配置地址

dev.env.js

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

    NODE_ENV: '"development"',

    API_ROOT:'"http://..."'   //新增的一个变量,配置开发接口地址,注意api双引号外面还有一层单引号

})

test.env.js

'use strict'

module.exports = {

    NODE_ENV: '"production"',

    API_ROOT:'"http://..."'    //测试地址,注意

}

prod.env.js

'use strict'

module.exports = {

    NODE_ENV: '"production"',

    API_ROOT:'"http://..."'    //线上地址,注意

}

5、修改package.json

6、 mian.js中配置axios接口地址

axios.defaults.baseURL = process.env.API_ROOT;

好了这样就可以



详细请看下面链接:

https://segmentfault.com/a/1190000016664571

你可能感兴趣的:(vue打包前开发测试生产环境接口地址配置)