Vue CLI打包配置详解：如何区分测试和正式环境并输出到不同文件夹

创建测试环境构建脚本

首先，在项目的build文件夹下新建一个名为testing.js的文件。


// 配置环境变量 type 为 testing
process.env.type = '"testing"'
// 引入build.js文件
require('./build')

配置环境变量

接着，修改config文件夹下的prod.env.js文件，在其中添加type环境变量配置，将process.env.type的值赋给type属性，以便后续构建脚本识别当前环境类型。


module.exports = {
 NODE_ENV: '"production"',
 // 将上文设置的环境变量，赋值到 type 属性上
 type: process.env.type
}

添加NPM构建命令

然后，在package.json文件中添加一个新的npm脚本命令。具体操作是添加一个名为testing的命令，其执行内容为node build/testing.js，用于触发测试环境的构建流程。


"testing": "node build/testing.js", // 添加testing命令
"build": "node build/build.js"

定义测试环境配置块

接下来，修改config/index.js文件。为了支持打包到不同的文件夹，需要将原有的build配置块复制一份，并重命名为testing配置块，用于定义测试环境特有的构建参数。


build: {
  env: require('./prod.env'),
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/mshop/',

  /**
   * Source Maps
   */

  productionSourceMap: true,
  // https://webpack.js.org/configuration/devtool/#production
  devtool: '#source-map',

  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],

  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 },
 testing: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../testing/index.html'),
  assetsRoot: path.resolve(__dirname, '../testing'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 },

修改Webpack构建配置

随后，进入build文件夹，修改webpack.prod.conf.js文件，针对测试环境和正式环境进行差异化配置。

首先修改HtmlWebpackPlugin的配置，将filename属性根据process.env.type的值动态指向config.testing.index或config.build.index，确保生成的HTML文件路径正确。


new HtmlWebpackPlugin({

   filename: process.env.type == '"testing"' ? config.testing.index : config.build.index
  }),

接着修改output配置，将path属性根据process.env.type的值动态指向config.testing.assetsRoot或config.build.assetsRoot，从而决定打包输出的根目录。


  output: {
  path: process.env.type == '"testing"' ? config.testing.assetsRoot : config.build.assetsRoot,
 },

之后，修改build文件夹下的build.js文件，以处理构建前的清理工作。

在build.js中，需要修改清理路径的逻辑。根据process.env.type的值判断是测试环境还是正式环境，分别获取对应的assetsRoot和assetsSubDirectory路径。这样在执行npm run testing或npm run build时，输出的文件目录才不会混淆。

具体的代码实现如下所示：

rm(path.join(process.env.type == '"testing"' ? config.testing.assetsRoot : config.build.assetsRoot, process.env.type == '"testing"' ? config.testing.assetsSubDirectory : config.build.assetsSubDirectory), err => {

配置环境域名地址

最后，根据不同环境配置相应的API域名地址。在代码中根据NODE_ENV和type变量判断当前是本地、测试还是正式环境，并设置对应的baseUrl。


let baseURL
if (process.env.NODE_ENV === 'production') {
 if (process.env.type === 'testing') { // 测试环境
  baseUrl = '测试环境地址'
 } else {               // 正式环境
  baseUrl = '正式环境地址'
 }
} else {                // 本地环境
 baseUrl = '本地环境地址'
}

完成上述配置后，即可执行构建命令。

执行npm run testing命令时，系统会读取测试环境配置，生成对应的testing文件夹；而执行npm run build命令时，则使用正式环境配置，生成dist文件夹。

以上就是在Vue.js项目中配置多环境打包到不同目录的完整步骤，希望能为您的项目开发提供便利。

Vue.js多环境打包配置：实现测试与正式环境输出到不同目录