如何在基于vue-cli的项目自定义打包环境
在工作当中，遇到了下面这个问题：
测试环境与生产环境中的用户权限不一样，因此，就需要根据测试环境打一个包，生产环境又打一个包。
可是，如果每次打包都需要更改权限的配置文件的话，会很麻烦，而且，体现不出一个coder该有的逼格。
为了更有逼格地解决这个问题，于是我百度了一番，上天不负有心人，让我找到了解决方案。
在详叙解决方案之前，先简单介绍下解决方案当中使用到的工具：cross-env,webpack.DefinePlugin
cross-env是给process.env当中添加变量的，那process.env又是什么呢？
process是一个控制node.js的进程，它是一个global对象，包含进程相关的一些信息，而process.env则是包含用户环境信息的一个对象，例如下面这样的对象：
{
TERM: 'xterm-256color',
SHELL: '/usr/local/bin/bash',
USER: 'maciej',
PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
PWD: '/Users/maciej',
EDITOR: 'vim',
SHLVL: '1',
HOME: '/Users/maciej',
LOGNAME: 'maciej',
_: '/usr/local/bin/node'
}
使用cross-env可以往这个process.env对象当中添加自定义的数据，然后可以在任何node.js的执行环境当中获取，一般是在打包配置当中获取process.env.NODE_ENV来判断是哪种环境，然后再作相应的配置。
如何使用cross-env
- 安装：npm i cross-env -D
- 在npm自定义命令当中使用；
"script":{
"build:testing":"cross-env NODE_ENV=‘testing' webpack"
}
然后，我们执行npm run build:testing的时候，就好执行以上的命令，cross-env就会在process.env当中添加一个NODE_ENV的属性，属性的值就是‘testing'字符串，注意这里是加了单引号的，因为这样才是一个字符串，如果不加的话，就相当于一个代码片段，还要在获取完之后通过JSON.stringify去转成字符串。
webpack.DefinePlugin又是什么呢？
webpack.DefinePlugin是webpack自带的一个插件，它的作用是在编译的时候生成一些全局变量的，这里说的全局变量指的是客户端的全局变量，相当于挂载在window对象上的变量，我们可以利用它的这个功能在不同的环境（开发，测试，或者生产）当中定义不同的行为。
介绍完两个插件了，是时候说一下两者结合在实际当中如何使用了。
下面将展示如何解决本文开头一开始所提到的根据测试和生产环境配置不同的用户权限的问题。
在config目录下，根据不同的环境创建不同的配置文件
如上图所示，test.env.js是测试环境的配置文件，prod.env.js则是生产环境的配置文件
test.env.js的配置
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
prod.env.js的配置
module.exports = {
NODE_ENV:"production"
}
分别创建测试与生产的权限配置文件
test.authority.js 测试环境权限
function getAuthority(userAuthority){
const menus = [];
switch(userAuthority){
case 'zhangsan':
menus = ["a","b","c","d"]; //这里的a,b,c,d相当与路由配置当中页面的name
break;
case 'lishi':
menus = ["a","b","c"];
break;
case 'wangwu':
menus = ["b","c","d"];
break;
default:
menus = ["a","b"];
}
return menus;
}
export default getAuthority;
prod.authority.js 生产环境的配置方法页和上面一样，只不过是menus里的配置不同
使用cross-env配置对应的NODE_ENV
package.json
"scripts":{
"build:testing": "cross-env NODE_ENV='testing' node build/build.js",
"build": "cross-env NODE_ENV='production' node build/build.js"
}
npm run build:testing执行的是测试环境的打包，npm run build则是生产环境的打包。
将当前环境的配置添加到客户端全局
build/webpack.prod.conf.js
const env = process.env.NODE_ENV === 'testing' ? require("../config/test.env.js") : require("../config/prod.env.js");
//配置webpack.DefinePlugin将env添加到全局变量当中
plugins:[
new webpack.DefinePlugin({
"ENV":env
})
]
根据环境信息配置用户权限
要对用户权限进行控制是要先知道当前登录的是哪个用户，因此用户权限配置的操作是在登录页面完成的。
login.vue
//获取环境信息，然后根据环境信息读取对应的权限配置文件
const env = ENV.NODE_ENV === "testing" ? "test" : "prod";
import getAuthority from `${env}.authority.js`;
export default {
methods:{
login(){
axios({...}).then(res => { //调用登录接口获取当前用户信息
let userAuthority = getAuthority(res.userName); //获取当前登录用户的页面权限
sessionStorage.setItem("authorityPages",JSON.stringify(userAuthority)) //将用户的页面权限保存起来，在生成侧边栏的时候通过v-if指令判断是否渲染
})
}
}
}
来到这里，就能够解决本文一开始所提的问题了，下面总结一下。
总结
- 根据不同的环境编写对应的打包环境信息配置文件；
- 根据不同环境编写对应用户权限配置文件；
- 根据不同环境编写对应的npm打包命令，使用cross-env设置对应的运行时环境；
- 在打包配置文件当中根据运行时环境获取对应的环境配置信息，然后使用webpack.DefinePulgin添加到客户端全局变量当中；
- 登录页根据全局变量中的环境信息获取对应的用户权限配置文件；
- 用户登录之后根据获取的用户权限文件中的方法获取登录用户的权限，并把当前登录用户的权限保存起来以便之后使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue-cli配置打包文件本地使用的教程图解
最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题 于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用
-
vue-cli扩展多模块打包的示例代码
场景 在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而vue-cli默认只提供了单入口打包,所以就想到对vue-cli进行扩展 实现 首先得知道webpack是提供了多入口打包,那就可以从这里开始改造 新建build/entry.js const path = require('path') const fs = require('fs') const moduleDir = path.resolve(__dirname, '../src/module
-
使用vue-cli打包过程中的步骤以及问题的解决
1.打包命令是npm run build,这个命令实际上是在package.json中,scripts中build所对应的命令: 2.创建一个prod.server.js,这个文件不是必须的,这个文件的用处是在打包完毕之后,通过启动node.js本地服务来访问打包完成的静态文件,不需要的同学可以忽略这一点, prod.server.js文件代码示例: let express = require('express'); let config = require('./config/index');
-
vue-cli webpack2项目打包优化分享
减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对.也不是绝对路径的写法时,会去 node_modules 目录下找.但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径:同样,对于别名(`alias)的配置
-
vue cli构建的项目中请求代理与项目打包问题
在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项
-
详解vue-cli快速构建vue应用并实现webpack打包
Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档很全面的. Vue两大核心思想,组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可. 一.什么是vue-cli vue-cli是由
-
使用electron将vue-cli项目打包成exe的方法
如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron
-
vue-cli 如何打包上线的方法示例
以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成 而想要打包成一份很简单, 只需要 npm run build 这个命令 这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径 之后只需要放在服务器上运行就好了. *常用技巧 1.如果在config -> index.js 中的 buil
-
详解webpack+vue-cli项目打包技巧
1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js.css等的版本控制? 设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串 以上就是本文的全部内容,希望对
-
如何在基于vue-cli的项目自定义打包环境
在工作当中,遇到了下面这个问题: 测试环境与生产环境中的用户权限不一样,因此,就需要根据测试环境打一个包,生产环境又打一个包. 可是,如果每次打包都需要更改权限的配置文件的话,会很麻烦,而且,体现不出一个coder该有的逼格. 为了更有逼格地解决这个问题,于是我百度了一番,上天不负有心人,让我找到了解决方案. 在详叙解决方案之前,先简单介绍下解决方案当中使用到的工具:cross-env,webpack.DefinePlugin cross-env是给process.env当中添加变量的,那pro
-
基于vue cli重构多页面脚手架过程详解
官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.
-
基于vue cli 通过命令行传参实现多环境配置
大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm
-
Vue Cli 3项目使用融云IM实现聊天功能的方法
介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二.引入融云IM 如图: 位置:public/index.html,引入 <script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三.可以正常使用
-
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un
-
基于Vue.js+Nuxt开发自定义弹出层组件
今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat
-
详解基于Vue cli开发修改外部组件Vant默认样式
前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s
-
vue cli实现项目登陆页面流程详解
目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使
-
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
-
基于 Vue 的 Electron 项目搭建过程图文详解
Electron 应用技术体系推荐 目录结构 demo(项目名称) ├─ .electron-vue(webpack配置文件) │ └─ build.js(生产环境构建代码) | └─ dev-client.js(热加载相关) │ └─ dev-runner.js(开发环境启动入口) │ └─ webpack.main.config.js(主进程配置文件) │ └─ webpack.renderer.config.js(渲染进程配置文件) │ └─ webpack.web.config.js ├