在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: 
文件结构如下图:

1)在config文件内新建test.env.js文件:

  1. 'use strict'
  2. module.exports = {
  3. NODE_ENV: '"testing"',
  4. ENV_CONFIG:'"test"'
  5. }

2)修改config内的prod.env.js文件:

  1. 'use strict'
  2. module.exports = {
  3. NODE_ENV: '"production"',
  4. ENV_CONFIG:'"prod"'
  5. }

3)对build中webpack.prod.conf.js做如下修改:

  1. // const env = require('../config/prod.env') //原始代码

或者为

  1. // const env = process.env.NODE_ENV === 'testing' //原始代码
  2. // ? require('../config/test.env')
  3. // : require('../config/prod.env')
  4. // console.log(process.env.NODE_ENV);

修改为:

  1. const env = config.build[process.env.env_config+'Env']

4)config中的index.js 文件中build部分代码修改如下:

  1. build: {
  2. prodEnv: require('./prod.env'),
  3. testEnv: require('./test.env'),
  4. // Template for index.html
  5. index: path.resolve(__dirname, '../dist/index.html'),
  6. // ····余下的代码就不写了
  7. }

5)确认安装cross-env

  1. npm install cross-env save-dev

6)对build文件夹下的build.js的修改:

  1. 'use strict'
  2. require('./check-versions')()
  3.  
  4. // process.env.NODE_ENV = 'production' //注释掉
  5.  
  6. const ora = require('ora')
  7. const rm = require('rimraf')
  8. const path = require('path')
  9. const chalk = require('chalk')
  10. const webpack = require('webpack')
  11. const config = require('../config')
  12. const webpackConfig = require('./webpack.prod.conf')
  13.  
  14. // const spinner = ora('building for production...') //注释掉
  15. var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
  16.  
  17. spinner.start()

7)修改package.json文件(在script里面添加):

  1. "scripts": {
  2. "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  3. "start": "npm run dev",
  4. "unit": "jest --config test/unit/jest.conf.js --coverage",
  5. "e2e": "node test/e2e/runner.js",
  6. "test": "npm run unit && npm run e2e",
  7. "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
  8. "build": "node build/build.js",
  9. "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
  10. "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  11. },

8)在common文件下新建env.js,对环境进行判断并切换,内容如下:

  1. /*
  2. * 配置编译环境和线上环境之间的切换
  3. * baseUrl: 域名地址
  4. * routerMode: 路由模式
  5. */
  6. let baseUrl = '';
  7. let routerMode = 'history';
  8. let DEBUG = false;
  9. let cancleHTTP = [];//取消请求头设置;
  10. //注:下面的baseUrl地址为假地址,只是模拟的,无法调通。
  11. if (process.env.NODE_ENV == 'development') {
  12. baseUrl = "https://10.248.65.100/GetTravelMethod";
  13. DEBUG = true;
  14. }else if(process.env.NODE_ENV == 'production'){
  15. baseUrl = "https://10.248.65.200/GetTravelMethod";
  16. DEBUG = false;
  17. }else if(process.env.NODE_ENV == 'testing'){
  18. baseUrl = "https://10.248.65.150/GetTravelMethod";
  19. DEBUG = false;
  20. }
  21.  
  22. export{
  23. baseUrl,
  24. routerMode,
  25. DEBUG,
  26. ROLE,
  27. cancleHTTP
  28. }

想要test环境下则运行:

  1. npm run build--test

相应的改为production环境则运行:

  1. npm run build--prod

vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)的更多相关文章

  1. [转]MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)

    MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)   网上有一篇shangdong_chu网友写的文章介绍如何在Eclipse上配置M ...

  2. vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)

    在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为‘development’:npm run build 时会把process.env.NODE ...

  3. Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现

    Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...

  4. Vue项目分环境打包的实现步骤

    转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...

  5. Vue 项目分环境打包

       我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用 packa ...

  6. vue项目打包步骤及运行打包项目

    (1)项目打包 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢?    具体步骤如下 ...

  7. Spring boot项目分环境Maven打包,动态配置文件,动态配置项目

    Spring boot Maven 项目打包 使用Maven 实现多环境 test dev prod 打包 项目的结构 在下图中可用看出,我们打包时各个环境需要分开,采用 application-环境 ...

  8. 搭建vue开发环境的步骤,六步完成

    搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...

  9. Linux vagrant+virtualbox环境搭建步骤

    Linux vagrant+virtualbox环境搭建步骤 Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用. 我们可 ...

随机推荐

  1. Android笔记之Fragment中创建ViewModel的正确方式

    之前一直都是这么写的 pageViewModel = ViewModelProviders.of(this).get(PageViewModel.class); //参数this是当前fragment ...

  2. BeanShell Sampler生成uuid

  3. 使用雪碧图Css Sprite精灵 | 加速网页响应速度

    什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

  4. VM 设置windows与Ubuntu 共享文件

    虚拟机  --->  设置  --->  选项   --->   共享文件夹   --->   选择总是启用 添加Windows下的路径   --->   确定 1. 先 ...

  5. redis通过命令传参以及主从复制

    config set appendonly  yes  临时生效 如果想永久生效的话,执行 config rewrite 并不是所有的都支持修改 config set bind ip  修改bind参 ...

  6. 【bug】vue同一组件使用

    vue使用同一个组件渲染,进行切换过程中会存在数据保存的情况. 比如路由切换,进行渲染的页面来自同一个组件,这个时候,要在监听路由的时候,将数据重新初始化

  7. vue-router如何参数传递

    1.我们用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to 先来看一下这种传参方法的基本语法: <router-link :to ...

  8. sql(7)

    EXCEPT是指在第一个集合中存在,但是不存在于第二个集合中的数据. EXCEPT 子句/运算符用于将两个 SELECT 语句结合在一起,并返回第一个 SELECT 语句的结果中那些不存在于第二个 S ...

  9. E: Sub-process /usr/bin/dpkg returned an error code (1)解决办法

    解决方法: 先将info文件夹更名 sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk 新建一个新的info文件夹 sudo mkdir /var/lib ...

  10. hdu多校第二场1009 (hdu6599) I Love Palindrome String 回文自动机/字符串hash

    题意: 找出这样的回文子串的个数:它本身是一个回文串,它的前一半也是一个回文串 输出格式要求输出l个数字,分别代表长度为1~l的这样的回文串的个数 题解: (回文自动机和回文树是一个东西) 首先用回文 ...