为了账号安全,请及时绑定邮箱和手机立即绑定

vue项目多入口教程

标签:
Vue.js

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

官方脚手架搭建vue项目

webp

TIM图片20180609230914.png

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

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

webp

TIM图片20180609232027.png


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

下面demo.html替换成index.html

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

创建完成目录如下

webp

TIM图片20180609230914.png

接下来重点部分

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

webp

TIM图片20180609233355.png


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

webp

TIM图片20180609233751.png


现在运行代码 npm run dev
进入其他页面
http://localhost:8080/test.html


打包发布项目时候配置的
修改在build目录下webpack.prod/conf.js文件,在plugins那里找到HTMLWebpackPlugin


webp

TIM图片20180609234057.png



作者:艾尔丶Lawliet
链接:https://www.jianshu.com/p/c778e5145750


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消