一般情況下我們需要多個(gè)環(huán)境如：開發(fā)dev 測試test 預(yù)發(fā)布release 正式build，每個(gè)環(huán)境有自己的獨(dú)立api接口請求地址单鹿。
此時(shí)我們就需要使用cross-env命令設(shè)置環(huán)境變量掀宋。
1 安裝 cross-env
項(xiàng)目根目錄下打開終端或命令行工具，運(yùn)行以下命令來安裝相關(guān)依賴包：
npm install cross-env --save-dev
2 使用 cross-env
在你的項(xiàng)目根目錄下仲锄，找到 package.json 文件劲妙，根據(jù)以下內(nèi)容進(jìn)行修改：
"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 多環(huán)境基本內(nèi)容配置
在 package.json 文件中添加各環(huán)境的配置，如下：
"envConfig": {
"dev": {
"API": "http://dev"
},
"test": {
"API": "http://test"
},
"release": {
"API": "http://release"
},
"build": {
"API": "http://build"
}
}
如需要配置其他內(nèi)容儒喊，和API同級即可镣奋。
package.json 修改后的完整內(nèi)容如下：
{
"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 打包時(shí)分配對應(yīng)環(huán)境配置
通過使用cross-env工具配置了環(huán)境變量ENV_KEY后，我們可以在vue.config.js文件中使用process.env.ENV_KEY來獲取該環(huán)境變量的值怀愧。接著侨颈，可以根據(jù)獲取到的值從package.json文件中獲取對應(yīng)的配置內(nèi)容，并將其存儲在全局變量中芯义，從而實(shí)現(xiàn)多環(huán)境的配置哈垢。
webpack.DefinePlugin是 Webpack 插件之一，用于在構(gòu)建過程中創(chuàng)建全局變量扛拨。它允許在代碼中使用這些全局變量耘分，可以在構(gòu)建時(shí)將它們替換為具體的值。
在你的項(xiàng)目根目錄下鬼癣，找到 vue.config.js 文件陶贼，根據(jù)以下內(nèi)容進(jìn)行修改：
const webpack = require('webpack')
const packageConfig = require('./package.json')
const ENV_CONFIG = packageConfig.envConfig[process.env.ENV_KEY]
plugins: [
// 環(huán)境配置全局變量
new webpack.DefinePlugin({ 'process.env.config': JSON.stringify(ENV_CONFIG) })
]
vue.config.js 修改后的完整內(nèi)容如下：
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 = {
// 靜態(tài)資源訪問路徑, 默認(rèn)是 '/'
publicPath: './',
// 指定構(gòu)建后的輸出目錄，默認(rèn)是 'dist'
outputDir: 'dist',
// 是否每次保存時(shí) lint 代碼,可選值 (boolean | 'warning' | 'default' | 'error') 默認(rèn) 'default'
lintOnSave: 'default',
// 配置開發(fā)服務(wù)器選項(xiàng)
devServer: {
// 開發(fā)服務(wù)器啟動時(shí)是否自動打開瀏覽器
open: false,
// 端口號
port: 3000
},
// 配置css相關(guān)選項(xiàng)
css: {
// 開啟 source map
sourceMap: process.env.NODE_ENV == 'development'
},
// webpack 的配置對象
configureWebpack: {
// 配置需要使用的 webpack 插件
plugins: [
// 環(huán)境配置全局變量
new webpack.DefinePlugin({
'process.env.config': JSON.stringify(ENV_CONFIG)
}),
// 壓縮圖片
new ImageMinimizerPlugin({
minimizer: {
// 指定了采用哪種圖片壓縮實(shí)現(xiàn)方式
implementation: ImageMinimizerPlugin.imageminGenerate,
// 壓縮插件選項(xiàng)
options: {
plugins: ['pngquant'] // 用于對 PNG 圖片進(jìn)行壓縮
}
}
})
],
// 配置Webpack模塊解析的方式待秃，使得你可以通過模塊名字而不是相對路徑來引入模塊
resolve: {
// 設(shè)置路徑別名
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來獲取對應(yīng)的配置項(xiàng)內(nèi)容。這樣章郁，根據(jù)之前的配置和設(shè)置的環(huán)境變量枉氮，可以輕松地在代碼中訪問和使用配置項(xiàng)的值志衍。這種方式非常方便，可以根據(jù)不同的環(huán)境動態(tài)獲取相應(yīng)的配置內(nèi)容聊替，使得代碼在不同的環(huán)境中更具靈活性和可配置性楼肪。
框架搭建整體流程
-
第一步 Vue2 使用 Vue 腳手架 Vue CLI 搭建一個(gè) Vue.js 前端項(xiàng)目框架
-
第二步 Vue2 vue.config.js 基礎(chǔ)配置，路徑別名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 配置多環(huán)境和全局變量 cross-env 和 webpack.DefinePlugin
