1、安装cross-env包实现跨平台环境变量配置
命令: npm install cross-env -D
2、在package.json中添加cross-env运行环境脚本
"scripts": {
"serve": "cross-env BUILD_ENV=dev vue-cli-service serve", // 这是开发环境
"build": "cross-env BUILD_ENV=prod vue-cli-service build", // 这是线上环境
"可能还会有其它环境...": "cross-env BUILD_ENV=prod vue-cli-service ...", // 。。。。
"lint": "vue-cli-service lint"
},
3、在跟目录下创建vue.config.js文件进行配置:
module.exports = {
// 开启代码的严格校验模式
lintOnSave: true,
devServer: {
// 可设置自定义端口号
// prot:9999
},
// 指定资源路径
//publicPath: 'http://www.baidu.com/app',
chainWebpack: config => {
console.log(config.plugin('define'))
config.plugin('define').tap(args => {
console.log('args::::', args)
// 添加环境
args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV)
return args
})
}
}
4、在src目录下创建build文件夹:然后创建 dev.js文件 和 prod.js文件
注意:这里创建的js文件名要和package.json中的名字一致
这个是dev本地环境文件的配置:
module.exports = {
BASE_URL: 'https://test.xxxx.com'
}
这个是prod线上环境的配置
module.exports = {
BASE_URL: 'https://www.xxxx.com'
}
5、在封装好的axios中进行配置,通过命令来自动切换线上和线下环境
import axios from 'axios'
console.log('process.env.BUILD_ENV当前环境::', process.env.BUILD_ENV) // dev
console.log('process.env.BUILD_ENV::', process.env.NODE_ENV) // development
console.log('process.env.BUILD_ENV::', process.env.BASE_URL) // /
// 根据npm run serve或build 来自动读取不同环境变量
const config_env = require(`../build/${process.env.BUILD_ENV}.js`)
const service = axios.create({
// baseURL: 'https://www.xxxxx.com',
baseURL: config_env.BASE_URL,
timeout: 3000
})
// 请求拦截
service.interceptors.request.use(config => {
console.log(config)
return config
}, _error => {
return Promise.reject('请求出错')
})
// 响应拦截
service.interceptors.response.use(res => {
return res
}, _error => {
return Promise.reject('数据返回失败', _error)
})
export default service
6、然后直接通过命令 npm run serve运行的是本地环境
npm run build打包到dist中,
cd dist进入,
可以通过 hs -p 8888 -o 来生成一个服务器测试