美文网首页
webpack vue-cli2 区分测试环境和线上环境

webpack vue-cli2 区分测试环境和线上环境

作者: 码农2 | 来源:发表于2019-08-19 17:10 被阅读0次

    目前vue-cli2上原配置是只有开发环境dev和线上环境prod的配置,但是我们实际场景上还有很多需要一个测试环境test,下面就是对测试环境的配置,将测试环境和线上环境的打包代码分开就不需要切来切去了。切入正题

    1. 复制一份build/build.js文件命名为build/build-test.js  修改这三处地方

    image.png

    2. 复制一份build/webpack.prod.conf.js文件命名为build/webpack.test.conf.js  修改这三处地方

    image.png

    3. 复制一份config/prod.env.js文件命名为config/test.env.js

    test.env.js

    'use strict'constmerge =require('webpack-merge')constdevEnv =require('./dev.env')module.exports = merge(devEnv, {NODE_ENV:'"testing"',BASE_URL:'https://test.com'})

    3.1在dev 和 prod 配置文件也分别加上 BASE_URL

    dev.env.js

    'use strict'constmerge =require('webpack-merge')constprodEnv =require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV:'"development"',BASE_URL:'https://localhost:8080'})

    prod.env.js

    'use strict'module.exports = {NODE_ENV:'"production"',BASE_URL:'https://prod.com'}

    4.在package.json文件里添加一条 npm run test 的启动项

    image.png

    运行npm run test可以看到test的代码已构建到dist-test目录下

    image.png

    5.可以在封装axios的时候带上process.env.BASE_URL

    importAxiosfrom'axios'constaxios = Axios.create({baseURL: process.env.BASE_URL,headers: {'Content-Type':'application/json;charset=UTF-8'}})exportdefaultaxios;

    不同环境使用不同的域名

    到此就可以区分开发环境,测试还,正式环境三个环境了,快去试试吧~

    另外,vue-cli3配置测试环境可参考:https://www.cnblogs.com/XHappyness/p/9337229.html

    作者:马小帅mm

    链接:https://www.jianshu.com/p/30d30d2835b2

    来源:简书

    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    相关文章

      网友评论

          本文标题:webpack vue-cli2 区分测试环境和线上环境

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