第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

一般情况下我们需要多个环境如:开发dev 测试test 预发布release 正式build,每个环境有自己的独立api接口请求地址。
此时我们就需要使用cross-env命令设置环境变量。

1 安装 cross-env

项目根目录下打开终端或命令行工具,运行以下命令来安装相关依赖包:

npm install cross-env --save-dev

2 使用 cross-env

在你的项目根目录下,找到 package.json 文件,根据以下内容进行修改:

"scripts": {
  "dev": "cross-env ENV_KEY=dev vue-cli-service serve",
  "test": "cross-env ENV_KEY=test vue-cli-service build",
  "release": "cross-env ENV_KEY=release vue-cli-service build",
  "build": "cross-env ENV_KEY=build vue-cli-service build"
}

3 多环境基本内容配置

package.json 文件中添加各环境的配置,如下:

"envConfig": {
  "dev": {
    "API": "http://dev"
  },
  "test": {
    "API": "http://test"
  },
  "release": {
    "API": "http://release"
  },
  "build": {
    "API": "http://build"
  }
}

如需要配置其他内容,和API同级即可。

package.json 修改后的完整内容如下:

{
  "name": "my-vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env ENV_KEY=dev vue-cli-service serve",
    "test": "cross-env ENV_KEY=test vue-cli-service build",
    "release": "cross-env ENV_KEY=release vue-cli-service build",
    "build": "cross-env ENV_KEY=build vue-cli-service build"
  },
  "envConfig": {
    "dev": {
      "API": "http://dev"
    },
    "test": {
      "API": "http://test"
    },
    "release": {
      "API": "http://release"
    },
    "build": {
      "API": "http://build"
    }
  },
  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "vue": "^2.6.14",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "image-minimizer-webpack-plugin": "^3.8.3",
    "imagemin": "^8.0.1",
    "imagemin-pngquant": "^9.0.2",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

4 vue.config.js 配置 Webpack 打包时分配对应环境配置

通过使用cross-env工具配置了环境变量ENV_KEY后,我们可以在vue.config.js文件中使用process.env.ENV_KEY来获取该环境变量的值。接着,可以根据获取到的值从package.json文件中获取对应的配置内容,并将其存储在全局变量中,从而实现多环境的配置。

webpack.DefinePlugin是 Webpack 插件之一,用于在构建过程中创建全局变量。它允许在代码中使用这些全局变量,可以在构建时将它们替换为具体的值。

在你的项目根目录下,找到 vue.config.js 文件,根据以下内容进行修改:

const webpack = require('webpack')
const packageConfig = require('./package.json')

const ENV_CONFIG = packageConfig.envConfig[process.env.ENV_KEY]
plugins: [
  // 环境配置全局变量
  new webpack.DefinePlugin({ 'process.env.config': JSON.stringify(ENV_CONFIG) })
]

vue.config.js 修改后的完整内容如下:

const path = require('path')
const webpack = require('webpack')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') // 压缩图片插件
const packageConfig = require('./package.json')

const ENV_CONFIG = packageConfig.envConfig[process.env.ENV_KEY]

module.exports = {
  // 静态资源访问路径, 默认是 '/'
  publicPath: './',
  // 指定构建后的输出目录,默认是 'dist'
  outputDir: 'dist',
  // 是否每次保存时 lint 代码,可选值 (boolean | 'warning' | 'default' | 'error') 默认 'default'
  lintOnSave: 'default',
  // 配置开发服务器选项
  devServer: {
    // 开发服务器启动时是否自动打开浏览器
    open: false,
    // 端口号
    port: 3000
  },
  // 配置css相关选项
  css: {
    // 开启 source map
    sourceMap: process.env.NODE_ENV == 'development'
  },
  // webpack 的配置对象
  configureWebpack: {
    // 配置需要使用的 webpack 插件
    plugins: [
      // 环境配置全局变量
      new webpack.DefinePlugin({
        'process.env.config': JSON.stringify(ENV_CONFIG)
      }),
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          // 指定了采用哪种图片压缩实现方式
          implementation: ImageMinimizerPlugin.imageminGenerate,
          // 压缩插件选项
          options: {
            plugins: ['pngquant'] // 用于对 PNG 图片进行压缩
          }
        }
      })
    ],
    // 配置Webpack模块解析的方式,使得你可以通过模块名字而不是相对路径来引入模块
    resolve: {
      // 设置路径别名
      alias: {
        '@': path.resolve('src'),
        '@public': path.resolve('public'),
        '@img': path.resolve('src/assets/images'),
        '@js': path.resolve('src/assets/scripts'),
        '@css': path.resolve('src/assets/styles')
      }
    }
  }
}

在完成配置后,便可以在代码中使用 process.env.config 来获取对应的配置项内容。这样,根据之前的配置和设置的环境变量,可以轻松地在代码中访问和使用配置项的值。这种方式非常方便,可以根据不同的环境动态获取相应的配置内容,使得代码在不同的环境中更具灵活性和可配置性。



框架搭建整体流程

  • 第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
  • 第二步 Vue2 vue.config.js 基础配置,路径别名alias
  • 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量
  • 第四步 Vue2 配置ESLint
  • 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
  • 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui
  • 第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

点击下载步骤 1-7 配置完成的完整 Demo

你可能感兴趣的:(Vue2,webpack,前端,node.js,多环境)