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

  • 相关阅读:
    nacos 命名空间
    Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column. To disable safe mode, toggle the option in Preferences
    gitee
    maven引入junit 4.12,项目import org.junit.Test 还是报错.
    gitflow
    202011
    idea 忽略显示不需要的文件
    服务熔断 & 降级区别
    各种微服务框架对比
    zookeeper not connected
  • 原文地址:https://www.cnblogs.com/liuguoying/p/13293533.html
Copyright © 2011-2022 走看看