vue-cli2.x配置build命令构建测试包&正式包

本文介绍如何使用 Vue CLI 2.x 配置 build 命令来分别构建测试包和正式包。通过安装 cross-env 插件并按步骤修改 build 文件夹内的多个配置文件，实现不同环境变量的设置。最终在 package.json 中定义相应的 npm 脚本来执行构建任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli2.x配置build命令构建测试包&正式包

首先安装cross-env插件：

npm install cross-env --save-dev

(cross-env的作用：通过js在项目中设置不同的环境变量的插件)

第一步：在build文件夹内新建build_test.js文件，内容复制build.js

修改process.env.NODE_ENV = "buildtest"和const webpackConfig = require(’./webpack.test.conf’)

第二步：在build文件夹内新建webpack.test.conf.js文件，内容复制webpack.prod.conf.js

//修改
const env = require('../config/test.env')
new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //去除控制台的console
          drop_debugger: env.drop_debugger,
          drop_console: env.drop_console
        }
      },

第三步：修改build/utils.js

exports.assetsPath = function (_path) {
 const assetsSubDirectory = (process.env.NODE_ENV === 'production'||process.env.NODE_ENV === 'buildtest')
   ? config.build.assetsSubDirectory
   : config.dev.assetsSubDirectory

 return path.posix.join(assetsSubDirectory, _path)
}

第四步，修改build/webpack.base.conf.js

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: (process.env.NODE_ENV === 'production'||process.env.NODE_ENV === 'buildtest')
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

第五步，修改config/index.js中build配置对象，将测试环境和正式环境的打包文件分文件夹存放(打包位置可忽略)

// Template for index.html
    index: process.env.NODE_ENV === 'buildtest'
      ?path.resolve(__dirname, '../test/index.html')
      :path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot:
      process.env.NODE_ENV === 'buildtest'
        ?path.resolve(__dirname, '../test')
        :path.resolve(__dirname, '../dist'),

第六步，在config文件夹修改文件内容为：

//test.env.js
'use strict'
module.exports = {
  NODE_ENV: '"buildtest"',
  drop_debugger: false,
  drop_console: false,
  profile: '"test"',
}

//prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  drop_debugger: false,
  drop_console: false,
  profile: '"prod"',
}
//dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  drop_debugger: false,
  drop_console: false,
  profile: '"dev"',
})

第七步，在package.json -> “script”: {}中配置相关执行命令

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",//正式
    "build:test": "node build/build_test.js"

项目中可使用process.env.NODE_ENV判断三个环境，
例：main.js

//根据配置引入global
console.log("NODE_ENV",process.env);
let profile = process.env.profile
let Global = require(`@/global/global_${profile}`)
//配置调试工具
if(process.env.NODE_ENV === "buildtest"){
  document.writeln("<script src=\"https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js\"></script>" +
    "<script>var vConsole = new VConsole();</script>" );
}