【vue】vue根据不同环境(正式、测试)打包（二）

最新推荐文章于 2025-06-13 20:32:27 发布

原创最新推荐文章于 2025-06-13 20:32:27 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#【vue】vue根据不同环境(正式、测试)打包（二） #vue测试包正式包分别打包

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍如何通过自定义npm命令来实现根据不同环境打包特定配置的软件包，适用于测试和正式环境。通过在package.json中添加特定脚本，创建并修改build_dev.js文件，定义NODE_ENV变量，以及调整webpack配置，可以实现在开发、测试和生产环境之间的灵活切换。

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

前言

当你想通过命令进行打包不同包，比如输入：npm run build_dev 就能打包出测试包，当然这个看情况，下面方法不是最好的，但也是一个方法（此方法不完善）。

使用场景

一般使用在 ajax 请求地方，比如说我测试环境是 www.api.lolku.cn/dev 。而正式环境是 www.api.lolku.cn/nice 。那么你打包的话，就会打正式包，那么怎么解决了，根据不同命令进行打不同的包吧，想想就美好。

步骤

第一步：创建命令

下面在 packge.json 文件中，创建一条命令

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxx",
  "author": "老程 <xxxxx@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build_dev": "node build/build_dev.js"  // 1、此处是自定义的。注意：不要把此注释复制代码中
  },
  "dependencies": {...
  },
  "devDependencies": {
    .....
}

第二步：创建 build_dev.js

在 build文件夹中，复制build.js文件，并且重新命名为 build_dev.js

复制出来的 build_dev

第三步：定义变量

下面的变量用于判断打包那个配置环境

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'devs' // 1、定义变量

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start()

.....

第四步：判断是否打哪个包

此处才是真正的换打包的地方。在build文件夹中找到 webpack.prod.conf 文件，修改下面的打包配置

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const env = process.env.NODE_ENV == 'devs' ? require('../config/dev.env') : 
require('../config/prod.env') ; // 1、此处就是判断哪个文件配置打包，如果是 devs 运行的，则测试包

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: