欢迎加入站点基地设计开发交流群:30720409
详细内容
当前位置 首页 >> 技术文档 >> Vue >> 正文
Vue设置多入口的方法
发布日期:2020-10-26     点击:550     字体:[ ]

1.先用脚手架搭建好Vue项目

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

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

3.

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

下面demo.html替换成index.html

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

创建完成目录如下

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

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

特别注意,chunks里面的demo及test就是上面entry里面的key,这就是html文件和vue文件关联起来的纽带

5.

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

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

特别要注意chunks那里,要加上'manifest','vendor',这两项,不然打包后不能正常运行

用户评论
昵称 
内容  *
验证码   
   
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号-1 可人软件设计