一般情况下我们需要多个环境如：开发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
