vue-cli3 配合 webpak DefinePlugin 构建期间自动检测环境变化，根据NODE

在使用 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

vue-cli3 配合 webpak DefinePlugin 构建期间自动检测环境变化，根据NODE_ENV引入配置文件相关推荐

vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
公司项目vue cli2升级到vue cli3
背景: 公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力(项目首次启动 ...
Vue cli3 库模式搭建组件库并发布到 npm
三.规划目录结构 1.创建项目在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择. $ vue create . 2.调整目录我们需要一个目录存放组件,一个目录存放示例,按照以下方式 ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
Vue CLI3 基本使用配置；
Vue CLI3 开始安装: npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目: vue create my-project ...
Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
Jenkins 配合 GitLab 实现分支的自动合并、自动创建 Tag
Jenkins 配合 GitLab 实现分支的自动合并.自动创建 Tag 背景 GitFlow工作流简介 Gitflow工作流定义了一个围绕项目发布的严格分支模型,它会相对复杂一点,但提供了用于一个健 ...
CC2530/ESP32+传感器+ZigBee+MQTT+MYSQL+Springboot+Vue+Echarts的老人卫生间防摔倒自动报警系统
CC2530/ESP32+传感器+ZigBee+MQTT+MYSQL+Springboot+Vue+Echarts的老人卫生间防摔倒自动报警系统写在前言运行效果展示一代版本 ESP32+MQTT ...

vue-cli3 配合 webpak DefinePlugin 构建期间自动检测环境变化，根据NODE_ENV引入配置文件

vue-cli3 配合 webpak DefinePlugin 构建期间自动检测环境变化，根据NODE_ENV引入配置文件相关推荐

最新文章

热门文章