webpack 开发测试正式环境切换_前段切换开发生产环境 webpack配置 - CSDN
精华内容
参与话题
  • Webpack配置环境切换

    千次阅读 2018-07-24 14:25:41
    在项目开发的时候,往往都会有很多套环境,就是俗称的开发环境(供开发人员使用),测试环境(用户测试),正式环境(最终用户正式使用)。每个环境所使用的应用服务器,数据库服务器、域名、端口等等都有可能是不...

    目的

    在项目开发的时候,往往都会有很多套环境,就是俗称的开发环境(供开发人员使用),测试环境(用户测试),正式环境(最终用户正式使用)。每个环境所使用的应用服务器,数据库服务器、域名、端口等等都有可能是不一样的,所以在要求我们能够一套代码能够运行在所有环境的前提下,需要确保我们每次发版的时候,应用连接的都是正确的后台地址,注意,这里说的是前后端分离项目中的前端项目。

    有的项目在发版前,切换环境的方式是这样的,通过注释不同的代码,或者引入不同的文件来达到连接不同环境的目的,但是这样做是有一定风险的,在某次打包前端的时候,如果忘了执行上述的切换环境的步骤,是有可能会出现连接了错误环境的情况出现的,比如用户在正式环境的前端下了订单,但是数据请求的是开发环境的数据库,这样就有可能导致非常严重的问题。

    需求

    说一下本文的使用场景,也就是需求:

    1. 每次打包的时候,都强制要求开发人员输入正确的环境的标志,以确保所发布的前端代码连接的是正确的后台服务器;
    2. 有的开发人员是全栈开发,兼顾前端以及后台,所以要求在调试前端的时候,可以手动切换,是调试本地服务器,还是调试远程服务器;
    3. 在打包的时候,强制使用远程的ip地址(这种是针对移动端项目的,移动端安装安装完之后,移动设备本地不可能存在服务器这么一说,只能连接远程ip或者域名,而前端如果是跟后台服务放在同一台应用服务器上的话,可以继续使用本地ip连接,但是端口还是要一致的)。

    步骤

    1. 安装一个依赖

      npm install cross-env --save-env
    2. 在package.json的script中,编写对应环境的调试以及打包脚本:

        "scripts": {
          "dev": "cross-env env=dev release=false node build/dev-server.js",
          "uat": "cross-env env=uat release=false node build/dev-server.js",
          "start": "node build/dev-server.js",
          "dev-release": "cross-env env=dev release=true node build/build.js",
          "uat-release": "cross-env env=uat release=true node build/build.js"
        },

      如脚本所示,在项目根目录下,执行

      npm run dev

      启动开发环境的调试服务,其中指定了env=dev(开发环境标志),release=false(不打包)

      npm run uat

      启动测试环境的调试服务,其中指定了env=uat(测试环境标志),release=false(不打包)

      npm run dev-release

      打包开发环境,其中指定了env=dev(开发环境标志),release=false(打包)

    3. 在根目录下的config/prod.env.js文件中给对象增加两个属性:

      module.exports = {
        NODE_ENV: '"production"',
        env: '"' + process.env.env + '"',
        release: process.env.release
      }
    4. process.env.* 就是刚才在启动脚本的时候使用cross-env指定的键值对,这里在prod.env.js写完了之后,不需要再dev.env.js中编写,因为在dev.env.js中,这段代码表明了,dev.env.js是继承了prod.env.js的属性参数(需要注意的是,在config目录下的dev和prod指的是本地调试还是打包,而不是上面说的开发、测试以及正式环境):

      module.exports = merge(prodEnv, {
        NODE_ENV: '"development"'
      })
    5. 准备环境配置文件,在src目录下新建env文件夹,里面放一些文件:
      这里写图片描述
      env.dev.js和env.uat.js存放的是环境的配置信息,比如移动端有远程的ip地址,app的下载地址等等。
      随便列一下里面的内容:

      ```
      export default {
        tag: 'dev',
        envName: '开发环境',
        mobile_ip: 'https://vaidnoho.qcloud.la',
      }
      ```
      
    6. env.public.js中存放的是一些公共的配置信息,每个环境都需要用到的配置信息,比如有的项目用了阿里巴巴的iconfont,指定了特殊的前缀,这时就可以在这里面将前缀信息记录下来,这里列一下该文件的内容:

      export default {
        remote: false,                                  //是否连接远程ip地址
        local_mobile_ip: 'http://localhost:5757',       //本地服务IP地址
        scan_url: 'www.dp-xcx.com',                     //小程序扫描下载地址
        success_code: 0
      }
      

      通过更改remote的的true/false值,可以在调试的时候切换远程ip还是本地ip,有的项目在请求后端服务的时候可能都会有一个状态码,一般都是0 ,有的可能是200,标志本次请求成功,还有一些其他请求标志,也可以在这个文件配置。

    7. 最后一个关键文件:src/env/index.js,先看代码:

      import publicEnv from 'src/env/env.public'
      import devEnv from './env.dev'
      import uatEnv from './env.uat'
      
      let targetEnv;
      switch (process.env.env) {
        case "dev":
          targetEnv = devEnv
          break;
        case 'uat':
          targetEnv = uatEnv
          break;
        default:
          throw new Error(`找不到当前环境-->>${process.env.env}`)
      }
      
      let finalEnv = Object.assign({}, publicEnv, targetEnv);
      
      if (process.env.release == null)
        throw new Error("process.env.release不存在,请检查!")
      else
        finalEnv.remote = !!process.env.release ? true : finalEnv.remote
      
      finalEnv.mobile_ip = finalEnv.remote ? finalEnv.mobile_ip : finalEnv.local_mobile_ip
      finalEnv.isRelease = process.env.release;
      
      delete finalEnv.remote
      delete finalEnv.local_mobile_ip
      
      export default finalEnv
      
      export function logEnv() {
        // console.log(`env-->>`, finalEnv);
        console.log('-----------------------------------------------------------')
        if (finalEnv.isRelease) {
          console.log(`打包压缩模式,强制使用远程ip,当前环境为:${finalEnv.envName}`)
          console.log(`远程IP地址-->>${finalEnv.mobile_ip}`)
        } else {
          console.log(`本地调试模式,当前环境为:${finalEnv.envName}`)
          console.log(`请求的IP地址-->>${finalEnv.mobile_ip}`)
        }
        console.log('-----------------------------------------------------------')
      }
      

      刚才第4步的时候,就提到过,代码运行之后,也可以访问process.env.env和process.env.release,这个index文件会根据这env和release自动判断,是调试还是打包,然后自动地去判断是否强制使用远程ip。

    8. 最后在使用的时候,还需要import env from ‘src/env’,然后console.log(env),这时可以验证一下是不是所想要的结果。

    展开全文
  • VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址前言我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上...

    VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    前言

    我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上的时候,我们会从真实服务器上获取接口,因此,我们可能在测试接口和真实接口之间频繁切换,让人十分恶心。

    因此,我们有必要想办法解决这个问题。

    本文是 Vue2+VueRouter2+webpack 构建项目实战
    的后续文章。理解本文内容,需要VUE相关技术基础。

    第一步,分别设置不同的接口地址

    首先,我们分别找到下面的文件:

    /config/dev.env.js
    /config/prod.env.js

    其实,这两个文件就是针对生产环境和发布环境设置不同参数的文件。我们打开dev.en.js文件。代码如下:

    var merge = require('webpack-merge')
    var prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"'
    })

    好,我们在NODE_ENV下面增加一项,代码如下:

    var merge = require('webpack-merge')
    var prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT: '"//192.168.1.8/api"'
    })

    然后,我们编辑prod.env.js文件,

    module.exports = {
      NODE_ENV: '"production"',
      API_ROOT: '"//www.baidu.com/api"'
    }

    好。我们分别设定的路径已经有了。下面就是如何调用的问题了。

    第二部,在代码中调用设置好的参数

    以我们之前的演示代码为例。你自己的项目请根据你自己的情况调整。以下文件和代码仅供参考。

    我们打开src/config/api.js文件,将原来开头的代码

    // 配置API接口地址
    var root = 'https://cnodejs.org/api/v1'

    修改为

    // 配置API接口地址
    var root = process.env.API_ROOT

    然后就完成了我们的配置工作。最后,重启项目,就能使新配置的接口地址生效了。

    在经过这样的配置之后,我们在运行

    npm run dev

    的时候,跑的就是测试接口。而我们运行

    npm run build

    打包项目的时候,打包的是服务器正式接口,我们就不用调来调去得了。

    祝开心!

    本文由 FungLeo 原创,允许转载,但必须保留首发链接。

    2017年06月19日更新

    上面的方法是没有问题的。但是需要重新运行 npm run dev 重新跑项目才能成功。

    另外,为了解决跨域问题以及其他,我现在不推荐采用这种方式调用接口,而是采用webpack自带的代理功能来实现接口的调用。具体方法参见《webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法

    展开全文
  • webpack生产环境开发环境的配置

    千次阅读 2018-08-05 21:31:14
    最近在做公司游戏预约页面的时候,在配置webpack的时候,忽略了生产模式切换,导致开发过程中有些痛苦,当改动样式或者某个插件配置时,本地server要等待编译很久才生效。用了很久的webpack开发,之前一直没太在意...

    最近在做公司游戏预约页面的时候,在配置webpack的时候,忽略了生产模式切换,导致开发过程中有些痛苦,当改动样式或者某个插件配置时,本地server要等待编译很久才生效。用了很久的webpack做开发,之前一直没太在意,现在特地整理下,也为以后做项目更加规范吧。

    在配置前,还是先了解下生产环境和开发环境有哪些区别,知道这些后,才知道我们到底要做些什么

    开发环境(development)生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置

    虽然,以上我们将生产环境开发环境做了略微区分,但是,请注意,我们还是会遵循不重复原则(Don't repeat yourself - DRY),保留一个“通用”配置。为了将这些配置合并在一起,我们将使用一个名为 webpack-merge 的工具。通过“通用”配置,我们不必在环境特定(environment-specific)的配置中重复代码

    那么,开始配置文件的编写。这里,我们把公共的配置,放到webpack.common.js中,生产环境配置放到webpack.prod.js中,开发环境配置放到webpack.dev.js中。

    公共配置(webpack.common.js)中,我们常用的插件,入口、输出文件、模块配置

    const path = require('path');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: {
            app: './src/index.js'
        },
        plugins: [
            new CleanWebpackPlugin(['dist']),
            new HtmlWebpackPlugin({
                title: 'Production'
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                }
            ]
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }

    生产配置(webpack.prod.js)中配置"source-map",生产环境下的插件,然后合并

    const merge = require('webpack-merge');
    const webpack = require('webpack');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const common = require('./webpack.common');
    
    module.exports = merge(common, {
        devtool: 'source-map',
        plugins: [
            new UglifyJSPlugin({
                sourceMap: true
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            })
        ]
    })

    注意这里使用了webpack.DefinePlugin()插件,来指定环境。这是因为,许多 library 将通过与 process.env.NODE_ENV 环境变量关联,以决定 library 中应该引用哪些内容。例如,当不处于生产环境中时,某些 library 为了使调试变得容易,可能会添加额外的日志记录(log)和测试(test)。其实,当使用 process.env.NODE_ENV === 'production' 时,一些 library 可能针对具体用户的环境进行代码优化,从而删除或添加一些重要代码

    开发环境(webpack.dev.js)中配置"inline-source-map"、本地服务器,然后合并公共配置

    const merge = require('webpack-merge');
    const common = require('./webpack.common.js');
    
    module.exports = merge(common, {
        devtool: 'inline-source-map',
        devServer: {
            contentBase: './dist'
        }
    })

    现在,我们可以在package.json中为生产和开发模式配置单独的运行脚本,

    展开全文
  • Vue2切换生产环境测试环境开发环境

    千次阅读 热门讨论 2019-04-28 19:47:59
      Vue配置环境变量和模式,可以分为两种模式:   第一种:Vue项目搭建成功后,config和build文件夹都存在 ​​​​   知道有这两个文件夹后,接下来就该配置环境变量以及对应的模式了。   首先,看一下...

      最近小咸儿一直在学习有关Vue的东西,所以将最近在弄得东西总结下来,以供参考。

      Vue配置环境变量和模式,可以分为两种模式:

      第一种:Vue项目搭建成功后,config和build文件夹都存在
    ​​​​在这里插入图片描述
      知道有这两个文件夹后,接下来就该配置环境变量以及对应的模式了。

      首先,看一下package.json中配置的启动方式:
    在这里插入图片描述
      从中,可以看出使用npm run dev启动项目时,dev走的文件是build下面的webpack.dev.conf.js文件

      那么,我们去看一下webpack.dev.conf.js文件中是如何配置的
    在这里插入图片描述
      这时,可以发现最终寻找的文件是config/dev.env文件

      知道这一点之后,我们就可以在config/dev.env文件中将我们想要切换的开发模式以及对应的地址放入其中了:

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      KERNEL: "'http://192.******/kernel-web'",
    })
    

      在具体使用的文件中,想要获取环境变量,按照如下填写:

     // 定义kernel服务环境变量
        kernel: '',
        
     // 获取环境变量地址
     this.kernel = process.env.KERNEL
     // 打印出来就可以发现是开发地址
     Console.log(this.kernel)
    

      这时候开发地址和环境变量就配置好了,生产环境和测试环境与此类同

    • 1、 在package.json中添加prod和test,分别对应webpack.prod.conf.js和webpack.dev.test.js即可
      在这里插入图片描述
    • 2、在build文件夹中添加对应的webpack.prod.conf.js和webpack.dev.test.js,其中test文件复制prod文件即可。
      在这里插入图片描述
    • 3、将对于的config文件中的prod.env和test.env文件补全

      prod.env文件:

    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      KERNEL: "'https://******/kernel-web'"
    }
    

      test.env文件:

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"test"',
      KERNEL: "'http://192.******/kernel-web'"
    })
    

      最终,在使用不同的启动命令时,可启动不同的环境

    • 生产:npm run prod
    • 开发:npm run dev
    • 测试:npm run test

      第二种:如何移除了这两个配置文件夹目录后该如何配置环境变量和模式呢?

      模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

    development 模式用于 vue-cli-service serve
    production 模式用于 vue-cli-service build 和 
    vue-cli-service test:e2e
    test 模式用于 vue-cli-service test:unit
    

      然后在根目录下创建.env.development文件,在文件中填写如下内容:

    VUE_APP_URL = http://192.******/kernel-web
    

      在实际运用的页面中添加如下代码:

    let temUrl = process.env.VUE_APP_URL
    console.log(temUrl)
    

      即可拿到对应的环境地址,将生产环境和测试环境参照开发创建.env.production和.env.test。

      与此同时,还需要修改package.json文件:

    "scripts": {
        "dev": "vue-cli-service serve --open",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "test:unit": "vue-cli-service test:unit",
        "test:e2e": "vue-cli-service test:e2e"
      }
    

      你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量,请在你的 package.json 脚本中加入:

    "dev-build": "vue-cli-service build --mode development",
    

      参考材料:

      环境变量和模式
      vue-cli3.0 环境变量与模式

    展开全文
  • 在我们日常开发中经常会遇到测试环境在上线的时候打包忘记切换,现在我们可以通过配置webpack,设置run dev为测试,build为生产; 首先找到config文件夹找到de’v.env.js,这里就是run dev 然后找到config文件夹找到...
  • vue 生产环境测试环境的配置

    万次阅读 2018-08-22 16:08:11
    我们引用的是axios  给src目录增加 api 文件夹 里面写上index.js // 配置API接口地址 var root = process.env.API_ROOT // 引用axios var axios = require('axios') // 自定义判断元素类型JS ...
  • Webpack常用插件总结

    千次阅读 2019-02-28 11:33:13
    刚完成一个基于React+Webpack的项目,渐渐地熟悉了Webpack的一些配置,开发过程中用到了不少Webpack插件,现在把觉得有用的Webpack插件总结一下当巩固学习啦,主要涉及热模块替换[Hot Module Replacement]、...
  • vue-cli3.x 新特性及踩坑记

    千次阅读 2019-08-21 14:20:44
    前言 Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地...Webpack 4 正式版刚发布的时候,觉得会有坑就先不用,现在发布已经大半年了,版本都到 we...
  • 下面拿vue项目做个改动 1.安装cross-env cnpm icross-env -D 2.package.json配置不同环境下打包的命令 ... "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build":...
  • vue 中区分测试环境和正式环境

    千次阅读 2019-01-18 16:54:43
    其实很简单,只要改动四个地方就行,不管你用的是vueResource或者anxios都可以 1.在/config/dev.env.js 和/config/prod.env.js中分别这样...const merge = require('webpack-merge') const prodEnv = require('./pr...
  • 【JavaScript】第十二章 开发环境

    千次阅读 2019-04-10 18:58:52
    关于开发环境 面试官放通过开发环境了解面试者的经验 开发环境最能体现工作产出效率 会以聊天的形式为主,而不是出具体的问题 IDE(开发工具,写代码的效率) Git(代码版本管理,多人协作开发) JS模块化 打包...
  • 先找到config 文件下的dev.env.js与prod.env.js她们是生产环境下与发布环境下的 /config/dev.env.js /config/prod.env.js 首先打开dev.env.js文件代码如下 添加一项代码 module.exports = merge(prodEnv, { NODE...
  • 掘金站内 webpack 优秀文章汇总

    千次阅读 2019-12-22 12:56:44
    本文使用 juejin-spider 生成 ... CSS][chenhongdong] webpack4-用之初体验,一起敲它十一遍 (3)[???? 1726][???? 前端][尼古拉斯李三] 妈妈再也不用担心我不会webpack了 (4)[???? 1705][????...
  • 开发环境配置:/config/dev.env.js文件中修改 var merge=require('webpack-merge') var prodEnv=require('./prod.env') module.exports=merge(prodEnv,{ NODE_ENV:'"development"', API_ROOT:'"//...
  • VUE 利用 webpack 给生产环境测试环境配置不同的接口地址 在config/dev.env.js 以及 config/prod.env.js文件进行相应的配置 // config/dev.env.js 'use strict' const merge = require('webpack-merge') const ...
  • 关于vue.config.js中配置前端代理

    万次阅读 2020-06-05 14:24:00
    注意开发环境的本地代理或者测试环境的代理,在部署到正式上时,一定要换成线上的IP地址,不然,数据拿不到哦 代理配置 easy mock 模拟接口地址 , 就以第一个进行说明怎么配置和使用了, 只说代理配置部分,其它...
1 2 3 4 5 ... 20
收藏数 685
精华内容 274
关键字:

webpack 开发测试正式环境切换