脚本宝典收集整理的这篇文章主要介绍了Vue项目根据不同运行环境打包项目,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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 中 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"' // 生产环境接口地址
}
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 --
不足之处,欢迎指出;不喜请绕道,谢谢!
以上是脚本宝典为你收集整理的Vue项目根据不同运行环境打包项目全部内容,希望文章能够帮你解决Vue项目根据不同运行环境打包项目所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。