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

idealcn 发布于2019-08-23 17:56 / 2195人阅读

在新建好的项目中，一般执行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

GPU云服务器云服务器服务器打包步骤环境变量的配置给云服务器ecs配置环境 php的配置环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104384.html

vue-cli3 配置开发-测试环境

摘要：实现输入一行命令，执行两条指令，分别打包线上生产环境和线上测试环境的代码。这样配置好之后，只要执行，它会自动先执行正式环境构建打包，完成之后再自动执行测试环境的构建打包，是方便接着再配置自动压缩，这里就需要使用到一个的插件。需求首先介绍一下本项目的背景，是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测...

Scott 2019-08-26 13:48 评论0 收藏0
带你了解webpack

摘要：根据依赖关系，按照配置文件把模块函数分组打包成若干个。会随着自身的的修改，而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割，下面详解还有一些新的插件，。 1. 前端工程化项目打包历史前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件自从xmlhttprequest被挖掘出来，网页能够和服务端通讯，js能做的事越来越多...

senntyou 2019-08-29 16:58 评论0 收藏0
带你了解webpack

摘要：根据依赖关系，按照配置文件把模块函数分组打包成若干个。会随着自身的的修改，而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割，下面详解还有一些新的插件，。 1. 前端工程化项目打包历史前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件自从xmlhttprequest被挖掘出来，网页能够和服务端通讯，js能做的事越来越多...

Tamic 2019-08-23 12:22 评论0 收藏0
开发运维（一）vagrant

摘要：成员可以在自己喜欢的桌面系统上开发程序，代码却能统一在封装好的环境里运行，非常霸气。打包分发当你配置好开发环境后，退出并关闭虚拟机。博文参考 http://rmingwang.com/vagrant-commands-and-config.html https://www.vagrantup.com/docs/virtualbox/configuration.html https:/...

FullStackDeveloper 2019-07-30 14:27 评论0 收藏0