vue-cli3 为项目添加多入口


git代码地址:https://github.com/miaSlady/vue3Demo.git

添加多入口原因:

由于vue为单页面项目,通过控制组件局部渲染,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中。

若项目过大,会造成单页面负载过重;同时,多页面利于模块独立部署。

添加多入口过程:

1.在public中新建多个页面:

2.配置多份路由/main.js/app.js(将原来的一份抄录为多份指向自己的组件路由即可)

3.在vue配置文件中(vue.config.js)配置多页面。

module.exports = {
    ...,
  pages:{
    index: {
      // 应用入口配置,相当于单页面应用的main.js,必需项
      entry: 'src/Index_config/main.js',
  
      // 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
      template: 'public/index.html',
  
      // 编译后在dist目录的输出文件名,可选项,省略时默认与模块名一致
      filename: 'index.html',
  
      // 标题,可选项,一般情况不使用,通常是在路由切换时设置title
      // 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      // title: 'console page',
  
      // // 包含的模块,可选项
      // chunks: ['console']
    },
    test: {
      // page 的入口
      entry: 'src/Test_config/main.js',
  
      // 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
      template: 'public/test.html',
  
      // 编译后在dist目录的输出文件名,可选项,省略时默认与模块名一致
      filename: 'test.html',
    },
}
4.当访问时:域名/index.html 或  域名/test.html  即可。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM