vue使用process.env搭建自定义运行环境
一、vue-cli项目下默认有三种模式:
- development:在 vue-cli-service serve 时使用。
- production:在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。
- test:在 vue-cli-service test:unit 时使用。
对应的 process.env.NODE_ENV 值分别为 development、production、test。
二、可以通过环境文件来指定默认环境变量和自定义环境变量,环境文件有一下几个类型:
- .env: 在所有的环境中被载入
- .env.local: 在所有的环境中被载入,但会被 git 忽略
- .env.[mode]: 只在指定的模式中被载入
- .env.[mode].local: 只在指定的模式中被载入,但会被 git 忽略
mode是某个模块名,如 在src创建 .env.friend 文件,内容:
NODE_ENV=development // 这里可以指定默认的环境是 development、production、test。
VUE_APP_ENV=friend // 自定义的friend环境
注意自定义的变量名必须以 VUE_APP_ 开头才能被webpack.DefinePlugin 静态嵌入,通过process.env.VUE_APP_xxx 来访问;执行此文件就相当于“进入”friend环境了。
三、执行自定义环境文件,进入自定义环境
在package.json中添加
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit","test:e2e": "vue-cli-service test:e2e","lint": "vue-cli-service lint","serve:f":"vue-cli-service serve --mode friend",},
执行 npm run serve:f,此时process.env.NODE_ENV为development, process.env.VUE_APP_ENV为friend,利用process.env.VUE_APP_ENV定义ip等信息即可,即可访问后台朋友的接口了。
四、配置举例和应用场景 vue-cli3
public/config/build.js,这里未使用自定义环境(未用process.env.VUE_APP_ENV)
let root = process.env.NODE_ENV;let build = {development: {//开发人员本地调试开发环境publicPath:"/",outputDir:"xuzhou_shuiwu_web",},production: {publicPath:"./",outputDir:"xuzhou_shuiwu_web",},test: {},// 公网环境pro: {},
};
// export default build[root];module.exports = build[root]
public/config/ip.js
// let root = process.env.NODE_ENV;
let root = process.env.VUE_APP_ENV; // 自定义
let key = "/back";// 代理关键字
// 通用配置
let common = {key: key,host: "0.0.0.0",port: "8888",localhost: "0.0.0.0:8888",upload: key + "/file/uploadFile", // 文件上传地址
}
let ipConfig = {// 默认环境development: {serverIP: "http://1.1.1.1:8883/portal/", logoutIp: "http://1.1.1.1:8883/portal/cas/logout/",},// 正式环境production: {serverIP: "http://1.1.1.1:8082/portal/", logoutIp: "http://1.1.1.1:8082/portal/cas/logout/",},// 测试环境test: {},// 自定义环境friend: {serverIP: "http://1.1.1.1:8881/portal/",logoutIp: "http://1.1.1.1:8881/portal/cas/logout/",},
};// export default Object.assign(common,ipConfig[root]);
console.log("当前环境:",root)
module.exports = Object.assign(common,ipConfig[root])
public/config/index.js
// import ip from "./ip"
// import build from "./build"const config = {ip: require("./ip"), build: require("./build")
};
// export default config;module.exports = config
vue.config.js
const config = require('./public/config');
const path = require("path");function resolve(dir) {return path.join(__dirname, dir);
}module.exports = {// publicPath: "./", //打包后的位置(如果不设置这个静态资源会报404) ./// vue-cli 3 已废弃baseUrlpublicPath: config.build.publicPath,outputDir: config.build.outputDir, //打包后的目录名称assetsDir: "static", //静态资源目录名称devServer: {open: true, // disableHostCheck: false,host: config.ip.host,port: config.ip.port,// https: false,// hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxyproxy: {[config.ip.key]: {target: config.ip.serverIP, // jenkinschangeOrigin: true,pathRewrite: {["^" + config.ip.key]: ""}}}// before: app => {}}, // 第三方插件配置// webpack相关配置// chainWebpack: config => {// // config.entry.app = ['./src/main.js'];// config.resolve.alias.set("@", resolve("src")).set("#", resolve("public"));// },// webpack3,4的写法configureWebpack: {resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': resolve('src'),// '~': process.cwd(),'#': resolve('public'),// components: resolve('src/components'),// util: resolve('src/utils'),// store: resolve('src/store'),// router: resolve('src/router')}}},// pluginOptions: {// // ...// },// 加载less加载器,路径:./public/css/common.lesschainWebpack: config => {const oneOfsMap = config.module.rule("less").oneOfs.store;oneOfsMap.forEach(item => {item.use("sass-resources-loader").loader("sass-resources-loader").options({// Provide path to the file with resourcesresources: ["./public/css/common.less", "./public/css/variable.less"]}).end();});}
};
axure封装request.js 部分
const service = axios.create({baseURL: require("#/config").ip.key,timeout: 5000, // request timeoutwithCredentials: true,
});
在单点登录中,可以在router.js中判断无权限跳转时使用:
location.href = config.serverIP + “cas/login?redirect=” + url
vue使用process.env搭建自定义运行环境相关推荐
- JDK+Tomcat搭建JSP运行环境--JSP基础
一.搭建JSP运行环境之前需要了解的基本知识 配置JSP运行环境之前,我们需要了解JSP的运行机制.只有了解JSP运行机制后,我们才能知道为什么要搭建JSP运行环境?如何去搭建JSP运行环境?为什么要 ...
- 阿里云服务器搭建Golang运行环境
阿里云服务器搭建Golang运行环境 1. 下载安装Golang 2. 使用9090端口编写网页 1. 下载安装Golang 下载Golang安装包: 解压之: tar -zxvf go1.14.2. ...
- 搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令
搭建Babel运行环境 Babel(http://babeljs.io/)可用于将使用ES6语法的脚本转化为ES5语法的脚本,基本功能的安装步骤如下: 1.安装node解释器和npm包管理工具 2.安 ...
- OSGI企业应用开发(二)Eclipse中搭建Felix运行环境
上篇文章介绍了什么是OSGI以及使用OSGI构建应用的优点,接着介绍了两款常用的OSGI实现,分别为Apache Felix和Equinox,接下来开始介绍如何在Eclipse中使用Apache Fe ...
- ubuntu下php服务器搭建_Ubuntu服务器下搭建php运行环境的方法
本文实例讲述了Ubuntu服务器下搭建php运行环境的方法.分享给大家供大家参考,具体如下: 安装 Apache2: sudo apt-get install apache2 安装PHP模块: sud ...
- CentOS7安装wdCP面板,快速搭建web运行环境(图文详解)
文章目录 1. wdCP简介 2. 安装过程 2.1 源码安装 2.1.1 ssh登录服务器 2.1.2 源码的下载.解压.安装 2.1.3 软件安装目录 2.2 进入后台管理 3.wdCP面板的卸载 ...
- 漫游Kafka实战篇之搭建Kafka运行环境
原文地址:http://blog.csdn.net/honglei915/article/details/37564329 Kafka视频教程同步首发,欢迎观看! 接下来一步一步搭建Kafka运行环境 ...
- 如何搭建html运行环境,搭建真实的运行环境2019.4.22
1.搭建真实运行环境步骤 ①先下载phpstudy软件 ②按照安装步骤进行phpstudy安装,安装后启动服务,点击<其它选项菜单>里面的<My HomePage>选项,正常显 ...
- Idea中搭建Resin运行环境(Mac)
一.背景 idea中搭建Resin运行环境,可以在idea中通过点击Run按钮直接调试应用. 二.Resin下载地址 下载地址:https://caucho.com/products/resin/do ...
最新文章
- Hadoop基础-HDFS集群中大数据开发常用的命令总结
- 【学习笔记】硬件设备选型
- electron项目中使用jquery不生效的解决方法
- 译文 | 与TensorFlow的第一次接触(一)
- 开发人员需要了解的渐进式Web应用程序
- jumbo 安装mysql,关于建立社工库的经验总结
- uva 11419 最大匹配(最小点覆盖)
- 服务器linux换windows,【服务器运维】如何将linux体系更换成windows体系
- 如何理解lower_bound/upper_bound
- PCIE协议(原版) 免费分享
- 继电保护原理3-输电线纵差
- TDMA WIFI 技术
- 品牌设计分析思维导图模板分享
- Could not initialize class com.android.build.gradle.internal.VariantManager解决方案
- camera raw 13.2中文版
- Win10桌面图标排列混乱
- windows端的MarginNote:BookxNote
- 【教学类-17-02】20221125《世界杯七巧板A4整页-随机参考图七巧板 3份一页》(大班)
- OSPF不规则区域的解决方案
- 可以像微信钱包一样?2020年数字钱包技术重要的进化方向(上)
热门文章
- C#中几种循环语法的比较
- 垂直梯形校正画质损失多少_梯形校正功能是怎么实现的?其中可大有学问
- 谈谈对java中分层的理解_让我们谈谈网页设计中的卡片设计
- 你不知道的vscode之空间控制
- happiness[国家集训队2011(吴确)]
- 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器
- Android在第三方应用程序系统应用尽早开始,杀死自己主动的第三方应用程序,以重新启动...
- 第四章例题、心得及问题。
- ***教程十:数据库注入(上)
- python oa系统_用python把C#操作OA的例子重写了一下