如何使用vue cli3实现针对不同环境进行分环境打包的详细步骤？

本文共计509个文字，预计阅读时间需要3分钟。

使用 CLI3 搭建的 Vue 项目默认配置文件，为了方便打包（无需手动修改不同环境配置），我们需要在不同打包环境下进行配置。以下是操作步骤：

1. 在项目根目录下创建三个配置文件： - `vue.config.js` - `build.config.js` - `build.prod.js`

内容如下：

`vue.config.js`: javascript module.exports={ chainWebpack: config=> { config.merge(require('./build.config.js')); } };

`build.config.js`: javascript module.exports={ // 公共配置 };

`build.prod.js`: javascript module.exports={ // 生产环境配置 };

2. 根据需要，在 `build.config.js` 和 `build.prod.js` 中添加或修改配置。

3. 打包时，根据需要指定配置文件： - `npm run build` 使用 `vue.config.js` 中的配置。 - `npm run build -- --config build.prod.js` 使用 `build.prod.js` 中的配置。

用cli3搭建的vue项目号称零配置文件，为了方便打包（不用手动来回改不同环境进行打包）那么我们在需要打包的时候分不同环境打包怎么办呢
1.在根目录下创建三个配置文件，如下图

这里我创建了三个，这三个分别是我的 本地；离线；线上环境 ，三个文件的内容依次为下VUE_APP_TITLE要对应当前文件后缀，build 对应的production

NODE_ENV = 'production' VUE_APP_TITLE = 'alpha' ==================================================================== NODE_ENV = 'production' VUE_APP_TITLE = 'production' ==================================================================== NODE_ENV = 'production' VUE_APP_TITLE = 'online'

2.package.json配置对应环境打包名称，如图所示：

3.如图所示

4.在接口拦截文件，如图所示：

5.配置完以后三个环境打打包方式分别如下：
app打包离线环境：npm run alpha
app打包本地环境：npm run build
app打包正式环境：npm run online

到此这篇关于vue cli3 实现分环境打包的步骤的文章就介绍到这了,更多相关vue cli3 分环境打包内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！