1、在build文件夹中创建testing.js文件
// 配置环境变量 type 为 testing
process.env.type = '"testing"'
// 引入build.js文件
require('./build')
2、修改config文件夹中的prod.env.js文件
module.exports = {
NODE_ENV: '"production"',
// 将上文设置的环境变量，赋值到 type 属性上
type: process.env.type
}
3、在package.json文件中添加npm run testing命令
"testing"
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在实际开发中，我们通常需要针对不同的环境（如开发、测试和生产）进行不同的配置。在Vue项目中，配置不同的打包目标目录可以帮助我们更好地管理和部署应用。以下是根据标题和描述详细解释如何在Vue.js项目中实现根据不同环境打包到不同目录的方法：
1. **创建环境变量**：
在`build`文件夹下创建一个名为`testing.js`的新文件，用于配置测试环境的变量。在文件中，我们设定`process.env.type`为`"testing"`，表示当前环境是测试环境。然后通过`require('./build')`引入主的构建脚本`build.js`。
2. **更新环境配置文件**：
修改`config`文件夹下的`prod.env.js`，这里通常包含生产环境的配置。在`module.exports`中，除了设置`NODE_ENV`为`"production"`，还需要将之前在`testing.js`中设置的环境变量`type`赋值给`process.env.type`。这样，我们在运行构建时可以区分不同的环境。
3. **更新`package.json`**：
在`package.json`文件中，添加一个新的`npm`脚本命令，例如`"testing"`，使其指向`testing.js`文件，这样就可以通过`npm run testing`来执行测试环境的构建。同时，保留原有的`"build"`命令，用于生产环境的构建。
4. **配置`config/index.js`**：
在`config/index.js`中，复制现有的`build`配置并改名为`testing`。这样，Vue CLI会根据当前环境（通过`npm run`命令指定）使用相应的配置进行打包。对于`testing`配置，你需要更改输出路径，比如将`index.html`的路径改为`../testing/index.html`，并且调整其他与目录相关的设置，如`assetsRoot`、`assetsSubDirectory`和`assetsPublicPath`，以适应测试环境的目录结构。
5. **源码映射和压缩**：
确保在生产环境中启用源码映射(`productionSourceMap`)，以便于调试。同时，如果需要开启GZIP压缩，需要安装`compression-webpack-plugin`并配置相关选项。此外，还可以根据需求开启或关闭bundle分析报告(`bundleAnalyzerReport`)。
通过以上步骤，Vue.js项目可以根据环境变量自动选择正确的打包配置，将应用打包到不同的目录。这对于团队协作和持续集成/持续部署（CI/CD）流程至关重要，因为它确保了每个环境的代码隔离，避免了混淆和错误。记得在部署时，要根据实际的服务器配置调整这些设置，以保证应用能够正常运行。
