如何改写vue项目webpack动态配置，实现打包支持多种环境域名的功能？

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

在前后端分离的架构下，各种框架的前端界面日益复杂，对项目的打包要求也越来越高。以下是一个Vue项目的示例，展示如何根据不同的命令行输入，打包出不同环境域名的版本：

1. 使用`npm run build -- --env production`命令，打包生产环境，生成`production.env.js`文件，域名设置为`www.example.com`。

2.使用`npm run build -- --env staging`命令，打包测试环境，生成`staging.env.js`文件，域名设置为`staging.example.com`。

3.使用`npm run build -- --env development`命令，打包开发环境，生成`development.env.js`文件，域名设置为`localhost:8080`。

通过这种方式，可以根据实际需求灵活配置打包环境，提高项目的可维护性和扩展性。

在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。（欢迎纠错，谢谢。）

1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。

2. 修改package.json里的script命令：

配置了test（测试），ready（预发布），prod（正式）三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自己需求，配置更多的命令，参数自定。