zoukankan      html  css  js  c++  java
  • webpack分环境打包-vue爬坑

    概要说明:

    vue在脚手架情况下,新建的项目,默认再带webpack打包。

    在项目开发中,用户本地测试以及线上测试环境,以及线上生成环境,所需要得api是不一样。

    当然,可以每次npm run build 的时候,去更改需要的api路径。

    但是,每次更改,总是会担心是否会漏,并且开发环境下,又要切换来切换去。

    基于webpack强大的打包功能。可以尝试如下分环境打包。

    步骤说明:

    第一步,配置vue的package.json命令,(新增一条打包命令,用于线上测试生产):

    第二步:复制build文件夹下的build.js,并命名为test.js,这个名字与第一步中,快捷命令里面的对应的文件名要一致。

    注意:要设置它的 process.env.NODE_ENV = 'testing';

     第三步:

    第四步:更改config里面的环境配置。

    根据需要,将此三个文件的api_root,设置为需要的域名。

    第四步,在webpack.prod.conf.js中,检查下环境的配置判断是否正确:

    第五步,这些配置设置好之后,在src中新建一个js文件,用于全局引用环境配置的api_root.

     然后再,在main.js中挂在vue的原型上,全局引用。

    最后,在组件中,这样使用:

    结束语句:

    在最后,执行命令,

    npm run build ,则打包的是prod.env.js对应的api域名的,(线上正式生产环境);

    npm run build:test,则打包的是test.env.js对应的测试api域名,(线上测试生产环境);

    npm run dev,则是运行dev.env.js本地开发环境对应的poxy代理得到的api环境。

  • 相关阅读:
    日报 18/05/29
    jsvascript === 和==的区别
    分享个数组
    ROC曲线绘制
    DLL中传递STL参数(如Vector或者list等)会遇到的问题[转载]
    利用JAX-WS 开发web服务
    菜鸟的成长之路——在清华特奖经验分享交流会上的演讲
    一段小代码的思考
    关于Vector中的元素中含有指针成员的情况
    关于职业规划——好帖【转载】
  • 原文地址:https://www.cnblogs.com/liuguoying/p/13293533.html
Copyright © 2011-2022 走看看