• 52389

    文章

  • 521

    评论

  • 43

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

vue cli3 如何配置多页面应用

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

1. 解决方向:

     对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢?

2.解决思路:

    首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面.

3.写代码

首先是网上有的教程:

打开 vue.config.js,配置入口:

 

const glob = require('glob');
const fs = require('fs');
const path = require('path');
const pages = {};
let entries;
try {
  // 获取相关入口
  entries = glob('src/pages/*/main.js', {
    sync: true
  })
} catch (err) {
  entries = [];
  throw err
}
// 格式化生成入口
let baseUrl = [];
entries.forEach((file) => {
  console.log(file);
  const fileSplit = file.split('/');
  const pageName = fileSplit[2];
  baseUrl.push(fileSplit[2]);
  let pageHtml = fileSplit.slice(0, 3).join('/') + '/index.html';
  if (!fs.existsSync(pageHtml)) {
    // 入口如果不配置直接使用 _default.html
    pageHtml = fileSplit.slice(0, 2).join('/') + '/_default.html'
  }
  // let myPath = fileSplit.slice(2, 3).join('/');
  // console.log(myPath);
  pages[pageName] = {
    entry: './' + file,
    template: 'public/index.html',
    filename: `${fileSplit[2]}/index.html`,
  }
});

在devServer选项中 加入

contentBase: path.join(__dirname, 'src/pages/_default.html'), // 配置默认启用的html

以上vue.config.js已经配置完成.

目录结构,在这里就不能放出来了,因为涉及到公司的信息,非常敏感,主要是把公共东西抽出来pages下新建目录page1,page2等,在pages下面需要建一个_default.html.

最后 最重要的一点: 把路由history改为hash,这个坑我花了好几个小时填的.改法:在各个多页面入口的router的mode改为hash

 


 转载至链接:https://my.oschina.net/kaykie/blog/1932319



转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

您觉喜欢本网站,或者觉得本文章对您有帮助,那么可以选择打赏。
打赏多少,您高兴就行,谢谢您对梁钟霖这小子的支持! ~(@^_^@)~

  • 微信扫一扫

  • 支付宝扫一扫

    支付宝打赏

1条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客