美文网首页
vue 3.0 实现多页面应用

vue 3.0 实现多页面应用

作者: __小白___ | 来源:发表于2019-12-03 10:01 被阅读0次

多页面的实现,主要是动态配置vue.config.js的page属性。我们来看看如何实现
1.我们看下目录结构


image.png
projectList   //所有多页面的存放
    projectA   //单个页面
        main.js   //入口
        index.html //渲染模版
    projectB
       main.js
       index.html

2.根据上面的这个文档结构,我们需要通过glob插件动态获取main.js以及index.html的文件路径。当然我们也可以直接在vue.config.js中这样配置

pages:{
    projectA:{
     entry:"./src/projectA/main.js"
    } 
}

如果我们写死的话,页面少很方便,但是页面一多,那就难搞了。
所以我们回到正题
3.在根目录新建productConfig.js

var glob = require("glob");
// 生成入口文件配置 
let entryConfig = {
   moduleList:[],
   // 开发的页面配置  默认是编译projectList下所有的子项目 
   createEntryConfig_dev() {
      let entryList = {};
      // 获取所有的moduleList
      glob.sync('./src/projectList/**/*').forEach(item => {
         let projectName = item.split('/')[3];
         if (!this.moduleList.includes(projectName)) {
            this.moduleList.push(projectName)
         }

      });
      for (const name of this.moduleList) {
         entryList[name] = {
            'entry': `./src/projectList/${name}/main.js`,
         }
      }
      console.log("result", entryList)
      return entryList;
   },
   ///根据传入的参数来决定要打包哪个页面/项目
   createEntryConfig_build(projectName){
      console.log(projectName,"projectname")
      let entryList = {};
      entryList[projectName] = {
         'entry': `./src/projectList/${projectName}/main.js`,
      }
      return entryList;
   }


}
module.exports = entryConfig;

4.在vue.config.js中引入生成的pages配置即可

const entryConfig=require("./productConfig")
var htmlWebpack=require("html-webpack-plugin");
var isProduct=process.env.NODE_ENV=="production"?true:false
// entryConfig.createEntryConfig();
var buildProjectName=process.argv[3];  //拿到动态打包项目的参数
module.exports={
    pages:isProduct? entryConfig.createEntryConfig_build(buildProjectName):entryConfig.createEntryConfig_dev(),
    outputDir:"dist/"+buildProjectName,//打包文件的存放地址
    configureWebpack:config=>{
        //production
        if(isProduct){
            console.log("生产环境打包")
            config.plugins.push(new htmlWebpack({
                filename:"index.html",
                template:`./src/projectList/${buildProjectName}/index.html`,
                title:`${buildProjectName}打包的页面`,
                inject:true,
                chunks:[]
            }))
        }
    }
}

本地运行: 就直接 npm run serve
打包生产: 如果你想打包projectA 就 npm run build projectA
希望可以帮到你!!

相关文章

  • vue 3.0 实现多页面应用

    多页面的实现,主要是动态配置vue.config.js的page属性。我们来看看如何实现1.我们看下目录结构 2....

  • vue 如何实现多页面应用

    其实我孤独的像条狗 再此我先说明 我写的这个例子是一个成熟的项目中直接加入的, 里面有好多配置都是配好的 , 但是...

  • vue多页应用

    vue如何将单页面改造成多页面应用 vue单页多页的开发环境配置+vue的开发思路

  • 基于vue多入口项目升级webpack4实践

    项目背景简介 多页面应用,每个页面独立entry,单个页面内使用vue-router 基于vue,使用vue-lo...

  • 使用Vue-CLI怎么实现多页分目录打包

    背景 使用VUE搭建多页面应用,实现公司共享页面的需求。 设计思想 所有系统都在同一目录下,配置多入口多出口。各系...

  • keepAlive使用方法

    vue单页面,多路由,前进刷新,后退不刷新 目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷...

  • 使用webpack配置多页面应用

    多页面应用 说到多页面应用,我们先来熟悉一下相反的单页面应用,提起单页面应用大家一定不会陌生,像vue、react...

  • (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代...

  • Vue-router 懒加载 - 异步组件

    当在使用 vue-router 来构建一个 vue 单页面应用的时候,如果应用的路有页面非常多的时候,应用打包后 ...

  • 如何用vue实现多页面应用

    我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是。因为vue在工程化开发的时候很...

网友评论

      本文标题:vue 3.0 实现多页面应用

      本文链接:https://www.haomeiwen.com/subject/eqzqgctx.html