做VUE项目时,有时想做多个入口来解决某些问题。

在根目录下的复制一份index.html,名称随便你命名,当然,你也可以都是放到一个文件夹下,我的就叫index1.html

然后在App.vue也复制一份,我的也叫App1.vue

然后main.js也复制一分,我的还 是命名main1.js

在main1里面更改下,把

import App from "./App";

改为

import App from "./App1";

其它 可以不用变。

然后到build文件夹里面。

webpack.base.conf.js文件在entry添加一个入口,如图

webpack.dev.conf.js文件的plugins里面也添加一段代码,如何红框

再在webpack.prod.conf.js文件plugins里面也添加 一份代码 ,如何红框所示

最后 在config文件夹里面的index.js在build里面添加一个请求,如图所示

至此。。多个入口配置已经完成 。

npm run build后会生成两个 入口文件,index.html和index1.html。

在浏览器上,可以用两个地址访问,比如我的是

http://localhost:8080/#/是默认地址,

也可以是http://localhost:8080/index1.html#/

vue设置多个入口的更多相关文章

  1. vue设置title和ioc图标

    vue设置ioc图标和title 1.ioc图标设置 在根目录中的index.html中引入代码: <link rel="shortcut icon" type=" ...

  2. 第44篇-为native方法设置解释执行入口

    对于Java中的native方法来说,实际上调用的是C/C++实现的本地函数,由于可能会在Java解释执行过程中调用native方法,或在本地函数的实现过程中调用Java方法,所以当两者相互调用时,必 ...

  3. vue设置多入口教程

    官方脚手架搭建vue项目 在src 目录下复制app内容创建test.vue,demo.vue, main.js复制main.js内容demo.js,test.js,修改一下内容 在根目录下创建tes ...

  4. Vue设置全局的方法和样式

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  5. vue 设置头文件

    vue的头文件是在index.html文件中设置的,毕竟vue的入口 先说一下标签页的名字: 就是这个名字的设置,要想每个标签页的名字都不一样,需要做以下这三步:1. 首先,在index.html文件 ...

  6. Vue设置element的dialog

    1.设置css:参考https://www.jianshu.com/p/a3eb60b75b92 <style> .el-dialog { max-height: 600px; displ ...

  7. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  8. Vue设置页面的title

    原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html 前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个inde ...

  9. vue设置页面标题

    使用vue-wechat-title插件对页面标题进行设置 1.安装模块    命令行窗口中运行npm install vue-wechat-title --save PS.如果程序正在运行,ctrl ...

随机推荐

  1. Android Studio 3.4 修改 .android 和.gradle缺省目录-windows7x64专业版环境。

    说明:缺省会在用户目录建立.android和.gradle目录.会挤满C盘.可以改变缺省目录. 改变.gradle目录路径示例,修改到D:\android目录,步骤: 1.建立d:\android目录 ...

  2. 分布式快照算法: Chandy-Lamport 算法

    转载https://zhuanlan.zhihu.com/p/53482103 这哥们写的好,顺便转过来吧,当做学习用. 分布式快照算法: Chandy-Lamport 算法 0. 引言 Spark ...

  3. 批量实现ssh免密登录

    本节索引 场景分析 ssh免密登录 pssh工具批量管理 SHELL自动化脚本 本篇总结 场景分析 作为一个运维工程师,不是每个人工作的环境都想阿里.腾讯那样,动不动就上亿的PV量,上万台服务器.我们 ...

  4. Nginx配置proxy_pass转发/路径问题

    proxy_ignore_client_abort on; #不允许代理端主动关闭连接 upstream的负载均衡,四种调度算法 #调度算法1:轮询.每个请求按时间顺序逐一分配到不同的后端服务器,如果 ...

  5. js---省略花括号{}的几种表达式

    在进行js的书写中,对于常见的if,for,while是可以简写,省略花括号{}的: var a = 10,b = 20; /** * if 简写 */ if(a > b) console.lo ...

  6. angular的路由例子

    app.routing.module.ts里面,关键部分 const routes: Routes = [ { path: '', redirectTo : 'c3/c2/mmc', pathMatc ...

  7. Mac JDK 卸载方法

    卸载步骤 输入 sudo rm -fr /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin sudo rm -fr /Library/Prefere ...

  8. Maven依赖包导入错误(IntelliJ IDEA):java.lang.OutOfMemoryError: GC overhead limit exceeded

    一.问题背景 最近用IntelliJ IDEA 打开一个老应用,一直加载依赖不成功,主POM中存在如下错误. java.lang.OutOfMemoryError:GC overhead limit ...

  9. 解决org.springframework.dao.DeadlockLoserDataAccessException

    添加链接池后批量添加更新出现了死锁 org.springframework.dao.DeadlockLoserDataAccessException: ### Error updating datab ...

  10. VUE AntDesign DatePicker设置默认显示当前日期

    1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import ...