如何使用vue cli3进行不同环境配置下的打包操作？

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

使用CLI3搭建的Vue项目默认配置文件如下，为了方便打包（无需手动来改不同环境的配置），我们可以在需要打包的时候分别对不同环境进行打包处理。

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

配置内容如下：

vue.config.jsjavascriptconst util=require('./build.util.js');const env=require('./build.env.js');

module.exports={ publicPath: process.env.NODE_ENV==='production' ? env.productionPublicPath : env.developmentPublicPath, outputDir: process.env.NODE_ENV==='production' ? env.productionOutputDir : env.developmentOutputDir, assetsDir: process.env.NODE_ENV==='production' ? env.productionAssetsDir : env.developmentAssetsDir, lintOnSave: process.env.NODE_ENV==='production' ? env.productionLintOnSave : env.developmentLintOnSave, devServer: { host: env.developmentHost, port: env.developmentPort, https: env.developmentHttps, hotOnly: env.developmentHotOnly, proxy: env.developmentProxy }};

build.env.jsjavascriptmodule.exports={ developmentPublicPath: '/', developmentOutputDir: 'dist', developmentAssetsDir: 'static', developmentLintOnSave: true, developmentHost: 'localhost', developmentPort: 8080, developmentHttps: false, developmentHotOnly: true, developmentProxy: {}};

module.exports={ productionPublicPath: '/', productionOutputDir: 'dist', productionAssetsDir: 'static', productionLintOnSave: false, productionHost: 'localhost', productionPort: 80, productionHttps: false, productionHotOnly: false, productionProxy: {}};

build.util.jsjavascriptmodule.exports={ resolve: (dir)=> require('path').join(__dirname, dir)};

通过以上配置，我们可以根据不同的环境（开发、生产等）来调整打包参数，而无需手动修改不同环境的配置文件。

用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 分环境打包内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！