vue实现分环境打包步骤（超详细）

作者：张元 815607354@qq.com

第1步：安装cross-env

在项目目录下运行如下命令安装cross-env

npm i --save-dev cross-env

安装成功或原本项目就有可以查看node_modules目录有cross-env插件

 

第2步：修改config目录下ENV文件参数

以我的项目为例（dev【本地测试环境】、prod【服务器测试环境】、henan，jilin（河南和吉林生产环境，以下生产环境只讲河南，因为吉林一样））

在config/目录下添加henan.env.js、jilin.env.js(将prod.env.js复制改个名字然后下面改一改就是好了)。prod.env.js和dev.env.js不用修改

分别对henan.env.js和jilin.env.js文件内容进修修改，修改后的内容如下：【NODE_ENV、ENV_CONFIG 根据自己的分类自定义】（吉林和河南类似不做赘述）

'use strict'

module.exports = {

   NODE_ENV: '"prod-henan"',

   ENV_CONFIG:'"henan"',

   BASE_API: '"https://api-henan"'

}

第3步：修改项目package.json文件【重点】

对package.json文件中的scripts内容进行个性，添加上新定义的几种环境的打包过程，里的参数与前面的调协保持一致。

{

  "name": "vue-element-admin",

  "version": "3.7.2",

  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",

  "author": "Pan <panfree23@gmail.com>",

  "license": "MIT",

  "scripts": {

    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "build": "cross-env NODE_ENV=production env_config=prod node build/build.js",

    "build--jilin": "cross-env NODE_ENV=prod-jilin env_config=jilin node build/build.js",

    "build--henan": "cross-env NODE_ENV=prod-henan env_config=henan node build/build.js",

    "lint": "eslint --ext .js,.vue src",

    "test": "npm run lint",

    "precommit": "lint-staged"

  },

 

如下图红色框内的参数一定要和XX.ENV.js文件的值对应否则不生效！

第4步：修改config/index.js

修改config/index.js文件中build参数，这里的参数会在build/webpackage.prod.conf.js中使用到

 

  build: {

    //zy 以下四行zy添加 为实现分环境打包

    devEnv: require('./dev.env'),

    prodEnv: require('./prod.env'),

    jilinEnv: require('./jilin.env'),

    henanEnv: require('./henan.env'),

 

    // Template for index.html

    index: path.resolve(__dirname, '../dist/index.html'),

如图红色框是自己添加代码

第5步：在webpackage.prod.conf.js中使用构建环境参数

对build/webpackage.prod.conf.js文件进行修改，调整env常量的生成方式。

// zy修改 为实现 分环境打包

// const env = require('../config/'+process.env.env_config+'.env')

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

第6步：修改build/build.js

修改process.env.NODE_ENV的赋值，修改spinner的定义

// zy修改 为实现 分环境打包

// const spinner = ora('building for ' + process.env.env_config + ' environment...')

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )

第7步：修改原来的url【核心】

修改的文件：你原来写访问后台接口地址的文件！！因项目而异，，你原来访问地址的地方换成这个带环境判断的！

例如我的：

这是我配置url的文件，当然根据你项目的情况找到配置访问后台url的文件进行修改

/*

 * 配置编译环境和线上环境之间的切换

 */

let url = '';

if (process.env.NODE_ENV == 'development') {

  url = "http://192.168.1.113:9000";//运行dev环境

}if (process.env.NODE_ENV == 'production') {

  url = "http://123. XX. XX. XX:9000"; //打包生产环境

}else if(process.env.NODE_ENV == 'prod-jilin'){

  url = "http://136. XX. XX. XX:11000";//打包吉林生产环境

}else if(process.env.NODE_ENV == 'prod-henan'){

  url = "http://137. XX. XX. XX:12017";//打包河南生产环境

}

 

……此处省略

 

const iamsURL = {

  url,

  …….

}

 

export default iamsURL

 

第8步：打包发布

打包：

运行npm run build //服务器测试环境

运行npm run build—jilin //吉林生产环境

运行npm run build—henan //河南生产环境

注意：

运行命令的 build—jilin是第三步配置的，也可以配置为 build:jilin那么打包命令就是npm run build:jilin (要学会变通)

发布：

运行结束后项目出现dist目录

将dist拷贝到tomcat的webapps目录下 启动tomcat 访问 localhost:8080/dist测试项目连接是那个后台地址