linux打包使用变量,vue-cli2自定义打包环境：使用cross-env定义环境变量

cross-env是跨平台设置和使用环境变量的脚本。

使用 cross-env 可以设置在不同的平台上有相同的NODE_ENV参数。

话不多说，直接开始

1、安装cross-env

npm install --save-dev cross-env

2、自定义打包命令

// package.json

"scripts": {

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

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

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

}

3、config目录添加对应环境的xxx.env.js文件

image.png

dev.env.js

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

env_config: '"dev"',

BASE_URL: '"http://dev.com"', // 本地环境访问接口

})

test.env.js

'use strict'

module.exports = {

NODE_ENV: '"production"',

env_config: '"test"',

BASE_URL: '"http://test.com"', // 测试环境访问接口

}

prod.env.js

'use strict'

module.exports = {

NODE_ENV: '"production"',

env_config: '"prod"',

BASE_URL: '"http://prod.com"', // 生产环境访问接口

}

env.js中的参数可以按照需求以键值对的方式自定义

注意：如果要在linux环境部署自动打包的话，需要注意key的大小写

4、修改打包配置

build/webpack.prod.conf.js 根据env_config变量动态引入env.js

···

// const env = require('../config/prod.env')

const env = require(`../config/${ process.env.env_config ? process.env.env_config : 'prod'}.env`)

···

5、自定义变量的使用

可以通过process.env来获取全局变量

例如：axios设置baseUrl

import Vue from 'vue'

import Axios from 'axios'

···

// 不需要跨域的情况可以直接这样设置baseUrl

Axios.defaults.baseURL = process.env.BASE_URL

// 若是本地调试需要跨域就要判断是development还是production，

Axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '' : process.env.BASE_URL

···

以上便是通过cross-env配置vue-cli2环境变量的分享，希望能帮到大家，谢谢

初写简书，敬请指教