vue 多个html入口,vue项目多入口教程

小白入前端几个月,资历尚浅,希望不对地方,多多包涵

官方脚手架搭建vue项目

AAffA0nNPuCLAAAAAElFTkSuQmCC

TIM图片20180609230914.png

在src 目录下复制app内容创建test.vue,demo.vue,

main.js复制main.js内容demo.js,test.js,修改一下内容

AAffA0nNPuCLAAAAAElFTkSuQmCC

TIM图片20180609232027.png

在根目录下创建test.html,index.html指向demo

下面demo.html替换成index.html

(好像必须存在index,不然页面报错 Cannot GET /)暂时不知道什么原理

创建完成目录如下

AAffA0nNPuCLAAAAAElFTkSuQmCC

TIM图片20180609230914.png

接下来重点部分

修改在build目录下webpack.base.conf.js,找到entry,在那里配置添加多个入口

AAffA0nNPuCLAAAAAElFTkSuQmCC

TIM图片20180609233355.png

修改在build目录下webpack.dev.conf.js文件,在module.exports那里找到plugins

AAffA0nNPuCLAAAAAElFTkSuQmCC

TIM图片20180609233751.png

打包发布项目时候配置的

修改在build目录下webpack.prod/conf.js文件,在plugins那里找到HTMLWebpackPlugin

AAffA0nNPuCLAAAAAElFTkSuQmCC

TIM图片20180609234057.png

作者:艾尔丶Lawliet

链接:https://www.jianshu.com/p/c778e5145750

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值