vue-cli3 配合 webpak DefinePlugin 构建期间自动检测环境变化,根据NODE_ENV引入配置文件
在使用vue-cli3 搭建的项目中,如何在vue.config.js中,使用使用DefinePlugin添加配置文件,构建期间自动检测环境变化,也就是如何根据NODE_ENV引入配置文件?./config/apimodule.exports = {dev: {env: 'dev',apiDomain: 'http://google.co...
·
在使用 vue-cli3 搭建的项目中, 如何在vue.config.js中,使用使用DefinePlugin添加配置文件,构建期间自动检测环境变化,也就是如何根据NODE_ENV引入配置文件?
./config/api
module.exports = {
dev: {
env: 'dev',
apiDomain: 'http://google.com',
},
test: {
env: 'test',
apiDomain: 'http://sina.com',
},
prod: {
env: 'prod',
apiDomain: 'http://baidu.com',
},
}
vue.config.js
const apiConfig = require('./config/api');
module.exports = {
chainWebpack: config => {
config
.plugin('define')
.tap(args => {
args[0].API_CONFIG = JSON.stringify(apiConfig[process.env.NODE_ENV])
return args
})
}
}
package.json 要先安装 cross-env
"scripts": {
"serve": "cross-env NODE_ENV=dev vue-cli-service serve",
"build test": "cross-env NODE_ENV=test vue-cli-service build",
"build prod": "cross-env NODE_ENV=prod vue-cli-service build"
},
"devDependencies": {
"cross-env": "^6.0.0"
}
项目中文件使用时
console.log(API_CONFIG.apiDomain)
// http://google.com | http://sina.com | http://baidu.com
更多推荐
已为社区贡献10条内容
所有评论(0)