vue的环境配置 生产环境和开发环境配置
vue的环境配置 生产环境和开发环境配置
·
vue的环境配置 – 生产环境和开发环境配置 简单配置
vue本身就已经自带了serve环境变量(development)和build环境变量(production)
可直接在api文件(request.js)中写:
// 不同环境不同地址
const apis = {
production: 'http://www.api.lalala.com', // 线上 (生成环境)
development: 'http://192.168.8.***:80', // 本地 (开发环境)
accessHomeData: 'http://www.xmyxapp.com' // 其他api
}
// ajax请求设置
const ajax = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? apis.production : apis.development
})
重点在与 process.env.NODE_ENV === ‘production’ ? apis.production : apis.development
上面使用了axios
基础项目配置
1.在src同级目录下创建.env.development和.env.production
2.配置文件的配置内容
.env.production 这个文件配置的是生产环境的变量,放置线上访问的路径
NODE_ENV = 'development' // 模式
VUE_APP_MODE = 'development' // 通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://192.****:8008/api/' // api地址
3.修改vue.config.js - 可不修改
module.exports = {
// 部署应用时的基本 URL
// 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath
// 基本路径,相对路径 或其他别名
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
// 输出文件目录
outputDir: 'dist',
// ...
}
4.修改package.json文件 - 可不修改
有相应的可不修改 vue会自动标识 development production
"dev": "vue-cli-service serve --mode development",
"test": "vue-cli-service serve --mode production",
5.在 request.js 中进行使用
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_URL,
// 超时
timeout: 100000
})
更多推荐
已为社区贡献4条内容
所有评论(0)