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环境。

  • 相关阅读:
    团队冲刺个人总结第二天
    Gym
    Codeforces Round #162 (Div. 2) A~D 题解
    Wormholes 虫洞 BZOJ 1715 spfa判断负环
    修剪草坪 单调队列优化dp BZOJ2442
    没有上司的舞会 树形dp
    餐巾计划问题 费用流
    最小路径覆盖问题 最大流
    [JSOI2007]麻将 模拟 BZOJ1028
    CF702F T-Shirts FHQ Treap
  • 原文地址:https://www.cnblogs.com/liuguoying/p/13293533.html
Copyright © 2011-2022 走看看