- 项目目录结构
- 在项目根目录下新建.env.development和.env.production文件,并在文件中指定不同环境时的变量值。
NODE_ENV = 'development'
outputDir = 'dev'
VUE_APP_ENVIRONMENT = 'developmentEnv'
NODE_ENV = 'production'
outputDir = 'dist'
VUE_APP_ENVIRONMENT = 'productionEnv'
- 编写一个统一的配置文件
开发环境和生产环境可配置两个js文件,在config.js统一判断一下当前环境
import devConfig from './config.dev'
import prodConfig from './config.prod'
const config = process.env.NODE_ENV == 'development' ? devConfig : prodConfig
export default config
其他需要用到配置环境的地方可以引入config.js,如axios
import axios from "axios";
import {ElMessage} from 'element-plus'
import config from "@/config/config";
const axiosInstance = axios.create({
baseURL: config.baseUrl ,
timeout: 1000 * 30,
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
});
最后需要在package.json文件中奖build命令 添加参数
vue-cli-service build --mode production 指定在打包时读取.env.production配置文件,通过读取这个配置文件,遍可以修改打包后的process.env对象的值。
{
"name": "sci_industrial_web",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode production"
},
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.8.3",
"element-plus": "^2.2.6",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}