vue-cli配置多入口多出口,实现一个项目两个访问地址,区分不同上线环境
最近工作中需要把项目分割成两块,一块需要跑在微信中,通过微信jdk获取用户资料默认登录,一部分需要给原生app做webview的内嵌页面,当然这部分内容是不跑在微信中的。
所以我想到了把项目分成两部分,不同的入口来控制是否获取微信的个人信息,比如原入口main.js中调用微信接口,获取用户信息,并携带用户信息的token标识。
而从inlay.js进入的则不调用微信接口,不获取用户信息。
并且npm run build后打包完后dist目录下出现两个入口: index.html 和 inlay.html 分别对应 main.js 和 inlay.js
在查阅了一些资料后对vue-cli生成的webpack进行了如下修改:
1.修改项目文件结构:
2. 修改 build/webpack.base.conf.js
3. 修改 build/webpack.dev.conf.js
4.修改 build/webpack.prod.conf.js
5. 修改 config/index.js
文件流大概是这样的:
main.js ==> entry/App.vue
inlay.js ==> entry/inlay.vue
当然也可以通过路由控制走一个router-view, 总之,进了不同的入口就可以通过不同的入口进行控制,也可以通过不同的路由,不同的axios配置进行控制,并且打包出来有不同的出口,也就是部署以后有两个url:
www.xxx.com 和 www.xxx.com/inaly.html
可以到我github上查看demo的源码: https://github.com/Jasonwang911/numtller
vue-cli配置多入口多出口,实现一个项目两个访问地址,区分不同上线环境的更多相关文章
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(下)
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...
- vue项目配置多入口多出口【转载】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...
- vue cli 配置信息说明
摘自csdn http://blog.csdn.net/hongchh/article/details/55113751
- (3/24)轻松配置 webpack3.x入口、出口配置项
在上一节中我们只是简单的尝了一下webpack的鲜,对其有了基本的了解,对于上一节当中的打包方式,在实际开发中并不使用,而是通过webpack的配置文件的方式进行设置的,所以该节就在上一节的基础上学一 ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
- vue中配置sass(包含vue-cli 3)
目录 vue vue cli 3 老版本的脚手架搭建的项目 版本 安装 不用修改任何配置 vue文件中使用 vue 更新时间: 2018-09-21 vue cli 3 选择 Manually sel ...
- vue的配置环境篇
1.电脑已经安装的nodejs和webpack. 2.1)打开cmd.win+r.可以直接输入node -v查看版本.安装淘宝镜像 npm install -g cnpm --registry=ht ...
随机推荐
- 搜狐JS查ip
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- web请求过程-学习使人快乐1
智齿离开我10个小时了,现在除了书啥都不能啃········呜呜呜~ ~~~~~~~~~~~~~~~~~~~想滑滑梯~~~~~~~~~~~~~~~~~~~ 网络请求过程 web请求大多使用B/ ...
- LeetCode竞赛题:笨阶乘(我们设计了一个笨阶乘 clumsy:在整数的递减序列中,我们以一个固定顺序的操作符序列来依次替换原有的乘法操作符:乘法(*),除法(/),加法(+)和减法(-)。)
通常,正整数 n 的阶乘是所有小于或等于 n 的正整数的乘积.例如,factorial(10) = 10 * 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1.相反,我们设计了一个笨 ...
- 给定一个非负整数 numRows,生成杨辉三角的前 numRows 行。
该题还是考杨辉三角计算,只不过最后每一行都放入List集合中,然后返回,直接看代码: public static List<List<Integer>> generate(in ...
- 003.Keepalived搭建LVS高可用集群
一 基础环境 1.1 IP规划 OS:CentOS 6.8 64位 节点类型 IP规划 主机名 类型 主 Director Server eth0:172.24.8.10 DR1 公共IP eth1: ...
- 从小白到区块链工程师:第一阶段:Go语言的HelloWorld初始(2)
四.写下第一段Go语言代码“Hello World” 小建议:就是文件夹路径或者文件名称不要出现中文,可能会导致一些不必要的麻烦(编译失败) 在sublime中,我们在src文件夹上面,单击右键“Ne ...
- Jenkins环境搭建(3)-配置自动发送邮件
紧接上一篇博文继续来完善Jenkins自动构建环境的搭建,今天来分享下配置邮件,构建任务后,自动发送邮件到指定邮箱 配置邮件分为两部分,第一部分是在系统管理中的系统设置中配置,第二部分是在任务中配置 ...
- mysql数据库操作语句整合
查看版本:select version();显示当前时间:select now(); 注意:在语句结尾要使用分号; 远程连接 一般在公司开发中,可能会将数据库统一搭建在一台服务器上,所有开发人员共用一 ...
- Rabbit的机器人-二分答案
Rabbit的机器人 思路 : 可以 推知 挡板的位置与最后 一步的方向有关 .如果是 R 根据题目要求那么最终结果一定是在>0的位置, 因为按照题意要求的最终不能回到重复走过的位置.所以如果有 ...
- BZOJ-5-4300: 绝世好题-位-DP
思路 :题意描述我也很绝望 .先说一下题意 : 给定长度为n数组a [ ],求a[ ] 的一个最大子序列(可以不连续),使得b [ i ]& b [ i - 1 ] ! = 0.求最大的 b数 ...