XFE 技术 生活 笔记 文集

Vue-cli 开发环境与生产环境自动调用不同配置

🔖 技术 👀 8 🕒 2019-04-18 👨‍🎓 XFE/Peter

最近开发项目中,开发环境调用测试接口,生产环境掉正式接口,每次打包的时候都忘记配置了,所以就想着借助webpack的生成环境和开发环境的不同配置来自动配置,好在这个问题,比较通用,网上已经有解决方案了,遂搬运过来备份

原文地址——VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

环境简介

项目使用Vue-cli 脚手架构建,基于webpack

配置介绍

在项目配置目录下,有两个文件,

//config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'"http://192.168.0.100/www1.myc2c.cn/"'
})

//config/prod.env.js

'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST:'"http://www1.myc2c.cn/"'
}

使用介绍

如上,在运行npm run dev的时候,将devEnv(merge函数第二个参数) 挂载在 全局变量process.env

在运行npm run build的时候,将prodEnv(merge函数第一个参数) 挂载在 全局变量process.env

在两个配置文件里面配置相同的属性,即可在开发环境和生成环境自动调用对应的值。包括且不限于api域名。