一、安裝cross-env

cnpm install --save-dev cross-env

通過(guò)cross-env這個(gè)插件我們能夠跨平臺(tái)設(shè)置環(huán)境變量.那么我們?cè)趺磥?lái)區(qū)分到底是生產(chǎn)環(huán)境、預(yù)生產(chǎn)環(huán)境還是測(cè)試環(huán)境

二、配置各個(gè)環(huán)境的參數(shù)

這里我們vue項(xiàng)目腳手腳版本是2.0 在config/文件夾，我們逐一添加pre.env.js\prod.env.js\test.env.js三個(gè)js文件，作為區(qū)分環(huán)境的依據(jù)

//config/pre.env.js'use strict' module.exports = {NODE_ENV: '"prepare"',ENV_CONFIG:'"pre"',//接口地址API:'"//pre/api"' } //config/prod.env.js 'use strict' module.exports = {NODE_ENV: '"production"',ENV_CONFIG:'"prod"',API:'"//prod/api"' } 'use strict' //config/test.env.js module.exports = {NODE_ENV: '"test"',ENV_CONFIG:'"test"',API:'"//test/api"' }

這里可以修改config/dev.env.js來(lái)區(qū)分本地環(huán)境地址

'use strict' //config/dev.env.js const merge = require('webpack-merge') const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',API:'"//dev/api"' })

三、修改package.json文件

新增打包命令

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","build": "node build/build.js","build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js","build:test": "cross-env NODE_ENV=test env_config=test node build/build.js","build:pre": "cross-env NODE_ENV=prepare env_config=pre node build/build.js"},

四、修改config/index.js文件

build: {//添加build參數(shù) prod\test\preprodEnv:require('./prod.env.js'),preEnv:require('./pre.env.js'),testEnv:require('./test.env.js'),// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),

五、修改build/webpackage.prod.conf.js 調(diào)整env常量生成的方式

// const env = require('../config/prod.env') const env = config.build[process.env.env_config+'Env']

六、修改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...') const spinner =ora('building for '+process.env.NODE_ENV+' of '+process.env.env_config+' mode ...') spinner.start()

接下來(lái)就可以使用以下命令進(jìn)行分別打包了

npm run build:test(打包測(cè)試地址)

npm run build:pre(打包預(yù)生產(chǎn)環(huán)境地址)

npm run build:prod(打包生產(chǎn)環(huán)境地址)

總結(jié)

以上是生活随笔為你收集整理的前端区分打包环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。