vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)

下面是实现分环境打包的步骤：

步骤一：配置不同环境的参数

在Vue项目中，我们可以通过创建不同的环境变量文件来配置不同环境中的参数。比如我们可以通过创建.env.development、.env.production、.env.test等文件分别配置开发环境、生产环境和测试环境的参数。其中以VUE_APP_前缀的变量可以在项目中通过process.env对象来使用，例如process.env.VUE_APP_API_URL。

下面是一个示例的.env.development文件：

VUE_APP_API_URL=http://localhost:3000/api

步骤二：修改webpack打包配置

我们可以使用Vue CLI提供的vue.config.js文件来修改webpack的打包配置。在这个文件中，我们可以通过configureWebpack属性来覆盖默认的配置，也可以通过chainWebpack属性来链式调用配置。下面是一个示例的vue.config.js文件，假设我们要区分开发环境和生产环境：

const path = require('path')

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境下的配置
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      config.plugin('html').tap(args => {
        args[0].isProd = true
        args[0].minify.minifyCSS = true
        return args
      })
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'vendor',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial'
          }
        }
      })
      config.optimization.runtimeChunk('single')
    } else {
      // 开发环境下的配置
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    }
  }
}

在这个示例中，我们使用了process.env.NODE_ENV来判断当前的运行环境，进而修改webpack的配置。在生产环境下，我们修改了入口文件、使用html-webpack-plugin插件将一些参数注入HTML中、使用set方法来设置外部的CDN引入等等。在开发环境下，我们只是修改了入口文件。

步骤三：配置不同的打包命令

我们可以在package.json文件中配置不同的打包命令以区分开发环境和生产环境。比如我们可以通过npm run build:dev和npm run build:prod来分别打包开发环境和生产环境的代码。下面是一个示例的package.json文件：

{
  "name": "my-project",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.4.3",
    "echarts": "^4.7.0",
    "element-ui": "^2.13.2",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "nprogress": "^0.2.0",
    "vue": "^2.6.11",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  }
}

在这个示例中，我们通过--mode选项来指定打包的环境。npm run build:dev是以开发环境的方式进行打包，npm run build:prod是以生产环境的方式进行打包。

示例1：基于VUE_APP_ENV变量区分不同环境配置

有时我们需要在多种环境中打包，但每个环境的配置不仅仅是API地址等一些常规配置不同外，还可能存在某些逻辑或者插件在不同环境中的启动模式不同。此时我们可以基于环境变量来划分不同环境，并区分配置不同的npm script命令

VUE_APP_ENV=dev #或者test， production等， 指定不同的环境变量
VUE_APP_API_ROOT=http://api.dev.com/ #dev环境的API请求地址
VUE_APP_START_MODE=autostart #或者manualstart， 是开机自启动还是手动启动逻辑

在index.html中设置环境变量，在main.js或者需要的组件中读取环境变量

//index.html
<script>
  window.env = {
    VUE_APP_ENV: process.env.VUE_APP_ENV,
    VUE_APP_API_ROOT: process.env.VUE_APP_API_ROOT,
    ...
  };
</script>

//main.js中读取
console.log(process.env.VUE_APP_ENV);//dev
console.log(process.env.VUE_APP_API_ROOT);//http://api.dev.com/

具体通过configureWebpack属性为webpack的全局变量添加赋值

//vue.config.js
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                env: JSON.stringify(process.env.VUE_APP_ENV)
            })
        ]
    }
}

//main.js中读取
console.log(env);//dev

通过env来判断使用环境

//main.js
const env = process.env.VUE_APP_ENV;

if (env === "dev") {
    ...
} else if (env === "test") {
    ...
} else {
    ...
}

在package.json中基于不同的env值区分不同的npm script命令

"scripts": {
  "build:dev": "VUE_APP_ENV=dev vue-cli-service build",
  "build:test": "VUE_APP_ENV=test vue-cli-service build",
  "build:prod": "VUE_APP_ENV=production vue-cli-service build"
},

使用npm run build:dev命令可以打出NODE_ENV为development，VUE_APP_ENV为dev的包.

示例2：基于命令行参数区分不同环境配置

小项目常常只需区分两个环境：开发环境和生产环境。此时，基于命令行参数来设置特定的环境变量以区分环境也是非常方便的方式。

除了process.env.NODE_ENV变量，我们可以使用process.argv变量来获取命令行参数。例如，我们可以在命令行中使用--env=dev来设置VUE_APP_ENV变量为dev。下面是一个示例：

//设置dev环境变量
node build.js --env=dev

在build.js中解析命令行参数

const args = require('minimist')(process.argv.slice(2));
const env = args.env || 'production'; //默认为生产环境

具体区分不同环境

if (env === "dev") {
    ...
} else {
    //在命令行中不传env参数，即--env使用默认生产
    process.env.NODE_ENV = "production";
    ...
}

完整的build.js示例

const fs = require('fs');
const path = require('path');
const minimist = require('minimist');
const { build } = require('vite');
const resolve = (dir) => path.join(__dirname, '..', dir);
const args = minimist(process.argv.slice(2));
const env = args.env || 'production';

async function main() {
  try {
    //Step 1: create a vite build client
    const clientResult = await build({
      root: resolve('.'),
      mode: env,
      configFile: resolve(`vite.${env}.js`),
      build: {
        ssr: false,
        outDir: resolve(`dist/${env}`),
        assetsDir: 'assets',
        rollupOptions: {
          output: {
            entryFileNames: 'assets/[name].[hash].js',
            chunkFileNames: 'assets/[name].[hash].js',
            assetFileNames: 'assets/[name].[hash].[ext]',
          },
        },
      },
    });

    console.log('正常结束')
    return clientResult
  } catch (e) {
    console.error(e)
    process.exitCode = 1
  }
}

main()

这样，我们就完成了Vue项目的分环境打包步骤，可以通过命令行执行不同的打包命令来打出不同环境的代码。