作者:Gvyi_262 | 来源:互联网 | 2024-10-29 10:05
根据不同环境需求,利用VueCLI的`npmrunbuild`命令对项目进行定制化打包,如测试、预发布和生产环境。通过配置`process.env`变量,实现不同环境下接口和服务的动态切换,确保应用在各阶段都能高效运行和调试。
根据项目需要,通过vue-cli中的npm run build 打包到不同的环境,例如测试环境,预发布环境,线上环境,根据process.env分别进行接口的调用
vue-cli 中build中build.js
require('./check-versions')()
// process.env.NODE_ENV = 'production'
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var cOnfig= require('../config')
var webpackCOnfig= require('./webpack.prod.conf')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()
build中webpack.prod.conf.js
const env = config.build[process.env.env_config+'Env']
// const env = process.env.NODE_ENV === 'testing'
// ? require('../config/test.env')
// : require('../config/prod.env')
config中的index.js
module.exports = {
build: {
prodEnv: require('./prod.env'), // 线上环境
sitEnv: require('./sit.env'), // 测试环境
ppeEnv: require('./ppe.env'), // 预发布环境
……
config中 dev.env.js
开发环境用的是测试接口,通过merge进行拷贝
var merge = require('webpack-merge')
var sitEnv = require('./sit.env')
module.exports = merge(sitEnv, {
NODE_ENV: '"development"'
})
在config中新建sit.env.js、ppe.env.js
module.exports = {
NODE_ENV: '"sitEnvironment"',
ENV_CONFIG: '"sit"',
BASE_API: '"http://*****"' // 测试环境地址
}
module.exports = {
NODE_ENV: '"ppeEnvironment"',
ENV_CONFIG: '"ppe"',
BASE_API: '"http://******"' // 预发布环境地址
}
安装cross-env
package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:prod": "cross-env NODE_ENV=production env_cOnfig=prod node build/build.js",
"build:ppe": "cross-env NODE_ENV=ppeEnvironment env_cOnfig=ppe node build/build.js",
"build:sit": "cross-env NODE_ENV=sitEnvironment env_cOnfig=sit node build/build.js",
"lint": "eslint --ext .js,.vue src","test": "npm run lint"
},
打包时候我们只需要
npm run build:sit // 测试环境
npm run build:ppe // 预发布环境
npm run build:prod // 线上环境