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

 更新时间:2019年06月04日 09:31:27   作者:冬瓜先生  
这篇文章主要介绍了vue实现分环境打包步骤(给不同的环境配置相对应的打包命令),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

文件结构如下图:

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

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG:'"test"'
}

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

'use strict'
  module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG:'"prod"'
  }

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

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

或者为

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

修改为:

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

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

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

5)确认安装cross-env

npm install cross-env –save-dev 

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

'use strict'
require('./check-versions')()

// process.env.NODE_ENV = 'production'  //注释掉

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...')  //注释掉
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )

spinner.start()

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

"scripts": {
 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 "start": "npm run dev",
 "unit": "jest --config test/unit/jest.conf.js --coverage",
 "e2e": "node test/e2e/runner.js",
 "test": "npm run unit && npm run e2e",
 "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
 "build": "node build/build.js",
 "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
 "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},

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

/*
 * 配置编译环境和线上环境之间的切换
 * baseUrl: 域名地址
 * routerMode: 路由模式
 */
let baseUrl = '';
let routerMode = 'history';
let DEBUG = false;
let cancleHTTP = [];//取消请求头设置;
//注:下面的baseUrl地址为假地址,只是模拟的,无法调通。
if (process.env.NODE_ENV == 'development') {
  baseUrl = "https://10.248.65.100/GetTravelMethod";
  DEBUG = true;
}else if(process.env.NODE_ENV == 'production'){
  baseUrl = "https://10.248.65.200/GetTravelMethod";
  DEBUG = false;
}else if(process.env.NODE_ENV == 'testing'){
  baseUrl = "https://10.248.65.150/GetTravelMethod";
  DEBUG = false;
}

export{
  baseUrl,
  routerMode,
  DEBUG,
  ROLE,
  cancleHTTP
}

想要test环境下则运行:

npm run build--test

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

npm run build--prod

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Element 头像上传的实战

    Element 头像上传的实战

    头像上传在很多实例中都可以用到,本文主要介绍了Element 头像上传,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 如何使用 Deepseek 写的uniapp油耗计算器

    如何使用 Deepseek 写的uniapp油耗计算器

    这篇文章主要介绍了如何使用 Deepseek 写的uniapp油耗计算器,下面是一个基于 Uniapp 的油耗计算器实现,包含 Vue 组件和页面代码,需要的朋友可以参考下
    2025-04-04
  • 开发Vue树形组件的示例代码

    开发Vue树形组件的示例代码

    本篇文章主要介绍了开发Vue树形组件的示例代码,它展现了组件的递归使用。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue如何将时间戳转换日期格式

    Vue如何将时间戳转换日期格式

    这篇文章主要介绍了Vue如何将时间戳转换日期格式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue动态修改页面title的两种方法

    vue动态修改页面title的两种方法

    本文主要介绍了vue动态修改页面title的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue vue-Router默认hash模式修改为history需要做的修改详解

    vue vue-Router默认hash模式修改为history需要做的修改详解

    今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue二级菜单导航点击选中事件的方法

    vue二级菜单导航点击选中事件的方法

    今天小编就为大家分享一篇vue二级菜单导航点击选中事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue导入Echarts实现折线散点图

    Vue导入Echarts实现折线散点图

    这篇文章主要为大家详细介绍了Vue导入Echarts实现折线散点图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解vue中axios的使用与封装

    详解vue中axios的使用与封装

    这篇文章主要介绍了vue中axios的使用与封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue3+Vite项目按需自动导入配置以及一些常见问题修复

    Vue3+Vite项目按需自动导入配置以及一些常见问题修复

    Vite是一种新型前端构建工具,能够显著提升前端开发体验,下面这篇文章主要给大家介绍了关于Vue3+Vite项目按需自动导入配置以及一些常见问题修复的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02

最新评论