前提
- 项目是直接通过
vue-cli脚手架
生成的; - 假设在项目开发中,分为三个环境 —
· 测试环境
· 预生产环境
· 生产环境
每个环境的接口地址都是不同的,而 vue-cli
给出的环境只有 dev
和 prod
这两个。虽然可以选择每次打包项目前手动修改 config/prod.env.js 中的 BASE_API
属性值,再运行 npm run build
打包项目就OK了,但还是挺烦的。如果能根据不同环境打包就一劳永逸了
步骤
第一步 安装依赖 cross-env
使用 cross-env
解决跨平台问题。在终端运行:
npm install cross-env --save-dev // 安装 cross-env 依赖
此依赖写入 devDependencies
中,仅在开发环境中使用此依赖。
第二步 修改 package.json 文件
在 package.json 中 scripts
属性中 build
命令替换为:
// 生产环境
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
// 测试环境
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
// 预生产环境
"build:prep": "cross-env NODE_ENV=production env_config=prep node build/build.js"
第三步 添加各环境参数
在 config 目录下添加 sit.dev.js(测试环境) 和 prep.dev.js(预生产环境)。
那么 config 目录下有 三个js文件 分别对应 三个环境:
(1) sit.dev.js(测试环境)
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"sit"',
BASE_API: '"xxx"' // 测试环境接口地址
}
(2) prep.dev.js(预生产环境)
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prep"',
BASE_API: '"xxx"' // 预生产环境接口地址
}
(3) prod.dev.js(生产环境)
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
BASE_API: '"xxx"' // 生产环境接口地址
}
第四步 修改 build/webpack.prod.conf.js 文件
const env = require('../config/prod.env')
使用构建环境参数,将 build/webpack.prod.conf.js 中的此行代码修改为:
const env = require('../config/' + process.env.env_config + '.env')
第五步 打包项目
// 测试环境打包项目
npm run build:sit
// 预生产环境打包项目
npm run build:prep
// 生产环境打包项目
npm run build:prod
— END —
不足之处,欢迎指出;不喜请绕道,谢谢!